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Nous connaissons tous HTML plus ou moins intimement. Lorsque nous naviguons sur 
Internet ou que nous ecrivons nos pages web, il reste fidele a nos cotes, malgre les peri- 
peties et deboires qu'il a subis. C'est qu'il en a connu des aventures ! Les derniers arrives 
tels que Adobe Flash ou Microsoft Silverlight pensaient l'avoir enterre, en vain... On le 
retrouvait parfois sous les doux sobriquets de « DHTML » ou de « Web 2.0 ». Cree a 
l'origine pour tisser des liens et vehiculer du contenu de maniere universelle, il se voyait 
denature dans ses fonctions primaires, comme l'ont montre ses tableaux de mise en 
page, aujourd'hui diabolises. A dire vrai et en y regardant de pres, HTML a toujours ete 
la, endossant loyalement son role d'ossature indispensable du Web. 

A ses debuts, sa mission se limitait a structurer des contenus basiques, essentielle- 
ment textuels et scientifiques, ordonnes de facon rigoureusement lineaire et assez peu 
excitante, il faut l'avouer. Puis, au fur et a mesure de revolution des usages des inter- 
nautes, HTML se diversifie, se renforce et s'adapte. Parfois avec un peu de retard sur 
les besoins, et malgre les batailles que se livrent les navigateurs. 

La quatrieme mouture de HTML, finalisee en 1998 - la prehistoire du Web, peut- 
on dire -, parait bien desuete aujourd'hui, treize annees plus tard. II s'agit pourtant 
de la plus recente version finalisee ayant recu l'adoubement officiel du W3C. Ce 
gigantesque retard accumule durant ces dix dernieres annees tend enfin a se combler, 
petit a petit, grace au developpement et a l'implantation de la version 5 du langage, 
tant attendue. Aux bons et loyaux services de HTML 4, se substituent de riches uni- 
vers adaptes aux besoins et usages d'un Web moderne, varie, rapide et mobile. 

Nouvelles balises, nouvelles technologies, formulaires avances, outils multimedias, 
adaptation aux supports nomades et applications performantes : autant de nouveaux 
mondes offerts par ce nouvel opus en voie d'adoption. Meme si HTML 5, sorte de 
nouveau « Web 2.0 », est cense annoncer le Web de l'avenir, dans la pratique, ses 
fonctionnalites repondent tout simplement aux attentes des internautes. Lusager 
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peut enfin profiter de la lecture audio ou video sans plug-in additionnel, trouver un 
hotel ou un emploi proches grace a la geolocalisation (qui pose certes quelques ques- 
tions de privaute), beneficier de support hors-ligne lorsque sa connexion est 
defaillante ou qu'il se deplace, profiter de fonctions de glisser-deposer, de stockage 
intelligent ou des web-workers, ces travailleurs de l'ombre qui permettent d'accelerer 
les performances en parallelisant le traitement des ressources. 

Pensez que la version precedente etait finalisee depuis plus de dix ans ! La patience 
de nous autres concepteurs web avait atteint ses limites ; elle se voit enfin recom- 
pensee. De grands sites tels que Google, Yahoo!, Twitter, Myspace, Kelkoo, Youtube 
ou encore Dailymotion integrent d'ores et deja une multitude d'applications stables 
de HTML 5, mais les grands beneficiaires en sont bien sur les sites web pour peri- 
pheriques mobiles qui peuvent deja exploiter nativement des fonctionnalites telles 
que l'adaptation automatique des designs aux differentes tailles d'ecran. 

HTML a bien muri. La version 5 s'annonce comme une ressource exaltante qui 
exploitera veritablement les possibilites technologiques contemporaines. Cela inclut 
la puissance des connexions internet, les peripheriques mobiles (smartphones et 
tablettes) ainsi que le multimedia. II etait temps. Et il est l'heure a present de revolu- 
tionner nos habitudes d'internautes et de concepteurs de sites web. 

Cette revolution n'est d'ailleurs pas sans rappeler celle operee dans mon domaine de 
predilection, celui des feuilles de styles CSS, autre univers en refonte depuis la ver- 
sion CSS 3. En tant que designer web et pour avoir redige quelques ouvrages sur les 
feuilles de style CSS, je peux comprendre et partager l'enthousiasme de Rodolphe 
ainsi que celui de la communaute de developpeurs en pleine ebullition. 

Si la symbiose entre HTML et CSS semblait parfaite sur le papier - Fun s'attachant 
a structurer l'information (balises, semantique), l'autre a lui donner forme (esthe- 
tique, positionnements) - je ne vous apprendrai pas que les deux ont longtemps ete 
mal imbriques : Ton cotoyait frequemment les styles de mise en forme au cceur des 
elements et balises HTML, bien que ce ne fut pas leur place attitree et que cela nuisit 
a I'accessibilite et a la compatibilite des documents produits. 

A l'ere de HTML 5 et CSS 3, le couple accede a une nouvelle dimension et de nou- 
veaux pouvoirs. Les interactions entre les deux langages n'ont jamais ete aussi 
puissantes : separation fond-forme renforcee grace a une pluralite de nouvelles 
balises semantiques (<header>, <footer>, <article>, <section>, etc.), gestion des 
medias et peripheriques mobiles, prise en charge demultipliee des formulaires (via la 
notion de formulaire valide, invalide, incomplet), etc. 

Cette imbrication va au-dela d'une simple association de langages, une veritable philo- 
sophic de conception s'en degage : par « HTML 5 », on entend desormais « HTML 5 
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combine a CSS 3 et JavaScript ». Une avancee considerable pour le Web qui comble 
enfin de facon extraordinaire les attentes des designers et integrateurs CSS. 

Meme le dernier retardataire, Microsoft, suit le mouvement avec entrain voire zele - 
fait d'autant plus notable qu'il n'etait pas coutumier du fait. En temoignent les pre- 
mieres moutures de Windows 8 et d'Internet Explorer 10, que nous avons pu voir en 
avant-premiere. 

Le mouvement est en marche, la revolution ne fait que commencer... 

Mais revenons a ce livre. HTML 5 se compose en pratique des langages HTML + 
CSS + JavaScript, autant de domaines dans lesquels l'auteur excelle. 

Tout d'abord, cet ouvrage approche l'exhaustivite, compte-tenu des specifications en 
cours devolution. Meticuleux, Rodolphe n'a pu se restreindre a moins de 600 pages 
de contenus, codes et illustrations. Lannexe en ligne sur l'accessibilite, notamment, 
meriterait d'etre lue par tout professionnel du Web. 

Ensuite, il ne contient pas d'approximation, et l'auteur ne prend aucune liberte avec 
les standards. Chaque partie est testee, moult fois verifiee et validee avant de figurer 
dans l'ouvrage. 

Enfin, il est agreable a lire, parseme d'un humour que Ton pourrait qualifier de « a la 
Rodolphe » ™ et qu'il manie avec beaucoup de justesse. 

Ce qui m'amene a dire un mot de l'auteur : Rodolphe Rimele manie avec une desinvol- 
ture naturelle les logiciels de graphisme et d'image, les animations Flash, il connait les 
arcanes de langages tels que jQuery, Ajax, PHP, MySQL, l'administration de serveurs 
web et maitrise encore bien d'autres jargons informatiques. Son curriculum vitae deborde 
allegrement de references en webdesign et developpement, et se distingue par la publica- 
tion d'un DVD d'apprentissage sur jQuery, du fameux lecteur Flash estampille 
« Dewplayer » et d'un memento sur MySQL precedemment publie chez Eyrolles. Ce 
portrait ne serait pas complet sans evoquer ses evidentes qualites de photographe ama- 
teur et d'humoriste tourmente via son carnet personnel blup.fr. Tant de perfection et de 
diversite a la fois suscitent l'envie pour le commun des mortels que je suis. Des que 
Rodolphe touche un clavier d'ordinateur, il semble que tout lui reussit, infailliblement, 
et a merveille. Et le voila a present qui s'attaque a HTML 5 ! 

Je suis sur que vous trouverez bien d'autres qualites a son livre. 
Bonne lecture. 

Raphael Goetter, fondateur d'Alsacreations.com 

raphael@goetter.fr 
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Ce livre est le fruit de longs mois de travail, de recherches, d'experimentations, de dis- 
sections des specifications toujours en mouvement, de pittoresques rencontres de 
bogues, de discussions avec mes collegues. J'espere qu'il sera utile au plus grand nombre 
de lecteurs et qu'il repandra autour de lui autant de plaisir que j'ai eu a l'ecrire. 



Avertissement et conventions 

La specification HTML est un document qui depasse les 800 pages, et qui fait reference 
a de nombreux autres grace a la magie des liens hypertextes. II est ecrit dans un langage 
peu distrayant, condense, tres technique, a la destination d'un public tres specialise. 

Cet ouvrage se veut didactique et pratique. II ne couvre pas toutes les mentions, excep- 
tions, et precisions de la specification, qui necessiteraient 23 volumes differents et une 
nouvelle etagere a cote de votre bureau. C'est pourquoi son objectif est d'aller a l'essentiel. 

J'ai choisi de faire reference aux elements HTML en les notant principalement en 
tant que balises, c'est-a-dire entre les caracteres inferieur a « < » et superieur a « > », 
pour faciliter la lecture et l'appropriation du code. 

Voici par exemple un element <p> qui correspond a un paragraphe. Fondamentale- 
ment, un element comprend une balise ouvrante <p> et une balise fermante </p>, 
eventuellement des attributs et du contenu. II s'agit aussi d'une entite mixte qui est a 
la fois presente dans le code HTML, dans le DOM, et a laquelle on peut faire refe- 
rence en JavaScript et en CSS. On peut done la decrire de multiples facons selon le 
contexte. J'espere que les puristes me pardonneront ce trope. 

Enfin, cet ouvrage ne traite pas de web design en general, ni de graphisme, ni des 
feuilles de style CSS (a l'exception des nouveautes CSS 3 mentionnees au sein des 
chapitres). 
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Convention html 5 ou HTML5 ? 

Les specifications officielles pronent I'absence d'espace entre le numero de version et le nom du langage. 
Nous avons prefere pour I'heure conserver I'espace encore quelque temps, pour plusieurs raisons. La verite 
est que HTML 5 ne serait pas la, s'il n'y avait d'abord eu HTML 4, si essentielle soit leur difference. D'autre 
part, il nous semblait premature de conferer d'emblee a HTML 5 le privilege reserve aux seuls noms propres 
ou marques. Voyons encore en HTML 5 le resultat d'une demarche rationnelle qui a son histoire. 

source 

Les exemples de code sont rediges en francais avec quelques soupcons d'anglais, lan- 
gage de predilection pour le Web. lis doivent etre adaptes a vos besoins qui peuvent 
varier grandement selon le contexte de developpement. Certains exemples figurant 
dans un chapitre ne reprendront pas necessairement toutes les recommandations pre- 
sentes dans les exemples precedents par souci de simplicite et de lisibilite. II vous 
appartiendra de faire vos choix, au regard des tenants et aboutissants de vos projets. 

Le code complet de la page HTML (en-tete et pied de page, proprietes de style) ne 
sera, la plupart du temps, pas present, car semblable d'une page a l'autre, mais vous le 
retrouverez dans les chapitres initiaux et les fichiers a telecharger. II en sera de meme 
pour les feuilles de style CSS associees a la presentation des documents HTML. Les 
codes source affichent une fraicheur maximum au moment de la redaction. 

Complements en ligne Annexes en ligne sur CSS et I'accessibilite (ARIA) et tableaux de prise 
en charge mis a jour 

Vous trouverez sur le site d'accompagnement du livre des ressources et complements, notamment trois 
annexes indispensables, mises a disposition gratuitement : 

• I'annexe A, qui fait un point, au moment de la mise sous presse de I'ouvrage, sur les 
« Fonctionnalites modifiees et obsoletes » entre HTML 4 et HTML 5 ; 

• I'annexe B, qui donne un precieux rappel sur les « Feuilles de style CSS » ; 

• I'annexe C, enfin, qu'il faudrait mettre entre les mains de tout developpeur web, et qui vous guide 
dans la creation de sites accessibles, conformes a la specification ARIA : « Accessibility et ARIA ». 

Vous trouverez egalement en ligne I'index de I'ouvrage mais aussi, sur le site de I'auteur, la mise a jour 
des tableaux de prise en charge par les navigateurs. 

► http://html5.blup.fr/ 

► http://www.editions-eyrolles.com/ 

Quant aux illustrations utilisees dans cet ouvrage, elles sont issues de Fotolia avec leur permission. Les 
photos des demonstrations, des exemples et des captures d'ecran ont ete realisees par I'auteur. 

► http://www.fotolia.com 
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propos de I'auteur 

Initialement ingenieur reseaux et telecoms, j'ai bifurque quelque peu a Tissue de mes 
etudes vers ma passion reelle, qui avait debute bien avant cela lorsque j'avais tente de 
percer plusieurs mysteres : 

• celui de mon modem RTC qui produisait des bruits etranges ; 

• celui de mon modem cable qui <blink>clignotait</blink> bien souvent orange ; 

• celui de la premiere version de Flash qui m'a valu un stage experimental aupres de 
mon propre fournisseur d'acces ; 

• celui de toutes les invocations magiques telles qu'IRC, NTTP et IPX qui 
cachaient un Nouveau Monde desormais en peril. 

A cette epoque - mode nostalgie on - sobre en debit, mais pas en GIF animes, les 
geants du Web Google, Dailymotion, YouTube, Wikipedia, Facebook n'existaient 
pas. Point de Chatroulette, d'iPhone ou de Twitter a l'horizon. Les CMS se comp- 
taient sur les doigts d'une seule main. Cela n'en faisait pas pour autant un monde 
moins fabuleux - mode nostalgie off. 

Comme beaucoup d'autres passionnes, je dois tout ce que j'ai appris a la veille techno- 
logique quotidienne que permet Internet, les echanges sur les forums, la lecture de 
livres en francais ou en anglais, la vie en agence web, la creation de projets experimen- 
taux, les recherches effectuees pour ecrire des articles publies sur Alsacreations.com. 

Bien qu'interesse par mes etudes menees a leur terme, je me suis apercu que la confi- 
guration de routeurs (et d'autres protocoles qui gravitaient dans chaque couche du 
modele OSI) etait bien moins rejouissante que les seances de <bodyx/body>, c'est- 
a-dire la realisation de sites esthetiques et vraiment utiles a mes semblables. Par 
ailleurs, je pouvais apprendre en une journee ce que Ton nous inculquait a l'universite 
en un mois et qui etait par moments depasse ou superfetatoire - n'entendez pas la 
qu'il y avait de super fetes, mais que les applications concretes se faisaient desirer. 

Parmi mes competences figurent les langages du Web JavaScript, CSS, et bien heu- 
reusement HTML ; mais aussi PHP, MySQL, Perl, C et tout ce qui concerne 
l'administration de systemes et serveurs Linux. Au-dela du code, je manie egalement 
le graphisme avec Flash, Photoshop, Illustrator, Inkscape pour concevoir de belles 
interfaces ergonomiques et de rares Lolcats. 

Je m'interesse aussi a la geographie, l'histoire, l'astronomie, pour me changer les idees 
depuis que le rayonnement d'un ecran illumine mon quotidien. 

J'ai publie precedemment a cet ouvrage un Memento MySQL aux editions Eyrolles 
et un DVD d'apprentissage pour le langage jQuery/Ajax. 
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Une breve histoire du Web 
et de ses standards 



Pour comprendre la facon dont le langage HTML 5 a ete pense et concu, il 
faut se replonger dans son histoire mouvementee au W3C et au WhatWG. 




Figure 1-1 Ce manuscrit n'a jamais existe 



HTML 5 - Une reference pour le developpement web 

Le langage HTML (HyperText Markup Language) est au Web ce que la portee musi- 
cale est a l'orchestre. L'un ne pourrait exister sans l'autre. Les musiciens, quelle que 
soit leur nationalite, ne pourraient interpreter l'oeuvre du compositeur sans cette 
notation commune, pour jouer de « concert », sans fausses notes et en rythme. 

Tout le monde a deja entendu parler de HTML. Tous les internautes ont deja vu 
cette extension dans la barre d'adresses de leur navigateur. Pourtant, tres peu savent 
ce qui se cache reellement derriere ces quatre lettres mysterieuses qui leur permettent 
d'acceder a leurs sites et services favoris. 

En tant que concepteur, designer ou integrateur web, on croit le maitriser puis Ton 
decouvre de nouvelles applications chaque jour, de nouvelles subtilites et astuces qui 
en font un sujet passionnant, voire monstrueux lorsqu'il s'agit de contenter tous les 
navigateurs sachant l'interpreter avec plus ou moins de virtuosite. 



Un successeur pour HTML 4 et XHTML 

Au commencement, la Darpa (agence du departement de la Defense des Etats-Unis) cree 
Arpanet. II s'agit, au debut des annees 1970, de relier des universites en reseau pour per- 
mettre les echanges de donnees. Par la meme occasion, le protocole TCP/IP est invente 
pour uniformiser le transit des informations entre les machines. II est encore utilise de nos 
jours. Toute machine ou terminal ayant acces a Internet possede une adresse IP. 

Dans les annees 1980, le reseau est scinde en deux, d'un cote Milnet (a vocation mili- 
taire, ex-DDN) et d'un autre cote NSFnet (a vocation universitaire, ex-Internet). Les 
applications sont diverses, mais tres austeres : echange de fichiers (FTP), e-mails, avec 
des serveurs relies entre eux a une vitesse fulgurante de 56 kbit/s. Le systeme des DNS 
(Domain Name System) est invente a son tour pour permettre de nommer les machines 
plutot que d'avoir a memoriser leur adresse IP. 

En 1984, le Cern (Organisation europeenne pour la recherche nucleaire) adopte le 
meme type de reseau pour ses echanges internes, puis I'etend et le relie a un labora- 
toire americain via Internet. C'est en son sein que I'equipe de Tim Berners-Lee, 
chargee de reorganiser l'information, invente un nouveau protocole, simple et abor- 
dable, destine a la mise en ligne de pages possedant des liens hypertextes. Des lors, 
l'usage devient public et Ton baptise toutes ces pages reliees entre elles, telle une 
grande toile mondiale : « World Wide Web ». II s'agit d'ailleurs du nom du premier 
navigateur dont la paternite revient a Tim Berners-Lee. 

Les premieres versions de HTML voient le jour dans les annees 1990, derivees de la 
grande famille des langages SGML (Standard Generalized Markup Language). II ne 
s'agit cependant pas de normes (il n'y a aucune specification HTML 1.0), car le langage 
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reste en pleine evolution, principalement motivee par les developpements des naviga- 
teurs. Les pages utilisent le protocole HTTP (HyperText Transfer Protocol) pour tran- 
sfer sur le reseau et etablir le dialogue entre le navigateur et le serveur. LIETF (Internet 
Engineering Task Force) heberge les premiers groupes de travail HTML. 

En 1993, le navigateur Mosaic de NCSA (National Center for Supercomputer Applica- 
tions) developpe pour Sun remporte un franc succes sous Unix. II inaugure l'element i mg 
pour l'incorporation d'images et les formulaires pour la saisie de donnees. L'annee sui- 
vante, une partie de son equipe prend son envoi et fonde Netscape. Le navigateur phare 
Netscape Navigator ajoute de nombreux elements de presentation (polices des textes, 
alignement, clignotement) allant totalement a l'encontre du but premier de HTML. 

A partir de la, les perspectives devolution divergent durant de nombreuses annees, 
chaque navigateur introduisant des balises proprietaires pour satisfaire les besoins de pre- 
sentation des documents. L'usage de certains elements (ou tags) est detourne de son but 
initial, notamment l'element tab! e pour la structuration en colonnes et la decoupe de la 
page en zones distinctes. On commence a redouter ce que Ton nomme la soupe de tags. 

Tim quitte le Cern en 1994 pour rejoindre le MIT (Massachusetts Institute of Techno- 
logy) et fonde le W3C (World Wide Web Consortium) pour promouvoir la standardisa- 
tion des langages du Web. 



Figure 1-2 

RFC 1866 -HTML 2.0 



, .. www, ietf.org/rfc/rfd.8G6, x \ ^ 

<- C1H O www.ietf.org/rfc/rfcl866,txt 
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Hypertext Markup Language - 2.0 

Status of this Merr.o 

This docam.ent specifies an Internet standards track protocol for the 
Internet community, and requests discussion and suggestions for 
improvements . Please refer to the current edition of the "Internet 
Official Protocol Standards" (STD 1) for the standardization state 
and status of this protocol. Distribution of this memo is unlimited. 

Abstract 



The Hypertext Markup Language (HTML) is a simple markup language used 

to create hypertext documents that are platform independent . HTML 
docam.ents are SGML documents with generic semantics that are 
appropriate for representing information from a wide range of 
domains . HTML markup can represent hypertext news , mail , 
documentation, and hyperm.edia; menus of options; database query 
results; simple structured documents with in-lined graphics ; and 
hypertext views of existing bodies of information. 

HTML has been in use by the World Wide Web (WWW} global information 
initiative since 1990. This specification roughly corresponds to the 
capabilities of HTML in common use prior to June 1994. HTML is an 
application of ISO Standard 8879:1936 Information Processing Text and 
Office Systems; Standard Generalized Markup Language (SGML) . 

The "text/html" Internet Media Type (RFC 1590) and MIME Content Type 
(RFC 1521} is defined by this specification. 
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En 1995, le W3C publie HTML 2.0 (sans les ajouts specifiques a Netscape Navigator 2) 
et debute le brouillon HTML 3.0 qui ne debouchera pas directement sur des implemen- 
tations concretes. JavaScript, langage de programmation cree pour ajouter de 1 'interacti- 
vite aux pages web, est invente pour le compte de Netscape par Brendan Eich. 

Microsoft s'apercoit a son tour de l'existence d'Internet, cree la premiere version d'Internet 
Explorer pour Windows (basee sur Mosaic), suivie de pres par sa version 2.0 supportant 
entre autres une variante de JavaScript nommee JScript, les frames et les cookies. 

En 1996, un nouveau standard nomme CSS {Cascading Style Sheets - feuilles de style en 
cascade) est officialise pour regir tout ce qui concerne la presentation des documents et 
separer la forme du contenu. II mettra un peu moins de dix annees a s'imposer. Internet 
Explorer passe en version 3.0 en integrant deja quelques fonctionnalites des CSS. 

En 1997, le W3C publie HTML 3.2, officialisant certaines des inventions proprietaires 
des navigateurs. Internet Explorer 4.0 installe par defaut avec Windows 98 supplante 
Netscape. II fait appel malheureusement a des nouveautes dont Microsoft est proprie- 
taire (JScript, VBScript, ActiveX). Le travail continue immediatement sur HTML 4.0 
avec la standardisation de nombreuses fonctionnalites avancees (support des styles, des 
scripts, des frames et des objets) et des ameliorations relatives a l'accessibilite. 

Apres la publication de HTML 4.0 en decembre 1997, le premier groupe de travail 
(HTML Working Group) cesse son activite. Le second, qui sera en realite le groupe de 
travail XHTML (Extensible HyperText Markup Language), est charge de redefinir 
HTML comme une application de XML, avec un role limite de maintenance pour 
HTML 4.0 puis 4.01. Ce groupe est a l'origine de XHTML 1.0, mais ne produit 
aucune avancee concrete pour le langage HTML. 



Figure 1-3 

W3C- HTML 4.01 



O HTML4.01 Specifics 



*- dii Owww.w3.org/TR/html401/ 



W3C 



HTML 4.01 Specification 

W3C Recommendation 24 December 1999 



Abstract 

This specification defines the HyperText Markup Language (HTML), the 
publishing language of the World Wide Web. This specification defines 
HTML 4.01, which is a subversion of HTML 4. In addition to the text, 
multimedia, and hyperlink features of the previous versions of HTML (HTML 
3.2 [HTML32] and HTML 2.0 [RFC1866] ). HTML 4 supports more 
multimedia options, scripting languages, style sheets, better printing 
facilities, and documents that are more accessible to users with disabilities. 
HTML 4 also takes great strides towards the internationalization of 
documents, with the goal of making the Web truly World Wide. 

HTML 4 is an SGML application conforming to International Standard ISO 
8879 - Standard Generalized Markup Language [ISQ88791 . 
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La specification XHTML 1.0 reprend les balises HTML 4.01 a l'identique, il s'agit 
juste d'adopter une syntaxe plus stricte suivant les regies du XML que Ton promettait 
a un bel avenir. Cette syntaxe definissant un cadre avec des regies plus structurees et 
combinees a CSS, conquiert de nombreux auteurs web qui y voient un ensemble de 
bonnes pratiques a favoriser. 

En 1998, CSS 2 est publie en recommandation, mais sa complexite d'implementa- 
tion amenera plus tard le W3C a produire une revision (2.1) avec une approche plus 
realiste. En parallele, le developpement de CSS 3 commence, decoupe en modules 
pour pouvoir beneficier de degres d'avancement divers. 

On entre alors dans une periode de stagnation apparente du cote du W3C, dont le 
fonctionnement trop ferme est critique par une partie des developpeurs web. Pour- 
tant, quelques avancees voient le jour du cote des navigateurs, par exemple XML- 
HttpRequest en 1999 avec Internet Explorer 5 pour les premices de l'Ajax. 

Les animations Flash (promues successivement par FutureWave, Macromedia, et 
Adobe) remportent un succes indeniable, car il est desormais possible, via l'installa- 
tion d'une petite extension au navigateur, d'embarquer dans les pages web moult ani- 
mations, dessins vectoriels, sons, videos, elements d'interaction, le tout complete 
avec un langage de programmation nomme ActionScript. 

En 2000, AOL rachete Netscape, signant par la son declin progressif. Le navigateur 
en version 4 est renomme « Communicator » mais affiche de faibles performances et 
souffre des pratiques commerciales de Microsoft. Le code source de ce qui etait 
espere devenir la version 5.0 de Netscape passe sous licence libre en 1998 avec la 
creation de l'organisation Mozilla, qui s'apercoit que ce dernier est irrecuperable et 
debute l'ecriture du moteur Gecko. 

Microsoft lance Internet Explorer 6.0 en 2001 et n'y touche plus durant 6 ans, con- 
siderant la suprematie etablie (jusqu'a 95 % de parts de marche). Pourtant, la ten- 
dance s'infiechit grace a la concurrence insistante des navigateurs alternatifs qui pro- 
posent un bien meilleur support des standards du Web, et quelques inventions bien 
pratiques en termes de confort de navigation et d'interface utilisateur. 

Dans l'elan, le W3C publie XHTML 1.1 qui se revele complexe a mettre en place, 
compte tenu des contraintes imposees par la specification et des moteurs des naviga- 
teurs utilises par les internautes. En effet, un document cree en XHTML et servi 
avec le type MIME adequat, ne pouvait meme pas etre compris par le navigateur le 
plus repandu a ce moment-la, Internet Explorer. 

En 2002, la fondation Mozilla lance sur les (quelques) restes de Netscape Navigator/ 
Communicator et de la branche principale de Mozilla un nouveau projet de naviga- 
teur Open Source nomme successivement Phoenix, Firebird puis Firefox, dont les 
innovations seduisent un public averti, puis de plus en plus large. Son extensibilite et 
son respect des standards font sa force. 
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Opera Software defend le navigateur du meme nom, initialement payant puis devenu 
gratuit en 2005. Celui-ci federe une communaute d'utilisateurs convaincus par sa reacti- 
vite et ses innovations. On le retrouve egalement sur consoles et plates-formes mobiles. 

Les soucis commencent lorsque le W3C decide d'evoluer a terme vers XHTML 2.0 
dont le premier brouillon est devoile le 5 aout 2002. Cette nouvelle version, qui se veut 
un nouveau depart, allegee de son lourd heritage, est incompatible avec les precedentes. 
Certaines balises tres courantes ne sont plus valides, telles que img pour les images. 
Comment faire alors ? Fournir une version du site en HTML pour les navigateurs 
actuels et maintenir en parallele une version XHTML 2.0 pour d'eventuelles imple- 
mentations dans de futurs navigateurs ? 

C'est une catastrophe tant aupres des editeurs de navigateurs qui veulent se concentrer 
sur les applications concretes repondant aux besoins des developpeurs, que du public qui 
ne comprend pas ce revirement de situation, et tarde a s'interesser au sujet. 

Suite a cette periode trouble et a la decision du W3C d'abandonner HTML en faveur 
de langages bases sur XML, la mailing-list WhatWG est creee le 4juin2004. 
A l'initiative du groupe, Ian Hickson d'Opera travaille sur Web Forms 2.0 pour etendre 
les possibilites des formulaires HTML - specification qui sera integree a HTML 5 par 
la suite. Le W3C tente de perseverer sur la voie du XML. 

Le WhatWG (Web Hypertext Application Technology Working Group) est constitue par des 
passionnes souhaitant ameliorer HTML, issus d'equipes de la fondation Mozilla, 
d'Apple et d'Opera. Leur but est de faire evoluer le langage pour repondre aux besoins 
concrets de l'explosion du Web, tout en maintenant sa simplicite et sa retrocompatibilite. 

Le WhatWG debute son travail en juin 2004 sous la denomination de Web 
Applications 1.0. Ian Hickson, editeur officiel du document HTML 5, rejoint finale- 
ment Google (membre du W3C). 

La specification HTML 5, soutenue en avril 2007 devant le World Wide Web Consor- 
tium par la fondation Mozilla, Apple et Opera, est acceptee comme point de depart 
du nouveau groupe de travail HTML. Ce dernier publie le premier brouillon (Wor- 
king Draft) le 22 janvier 2008 et admet que XHTML 2.0 est trop ambitieux. 

Le processus est alors assez inhabituel puisque les deux entites, W3C et WhatWG 
collaborent sur le projet HTML 5 avec des approches differentes, parfois quelques 
accrochages sur la methode, mais avec un pragmatisme certain grace a la constitution 
tres forte des equipes par des membres d'editeurs de navigateurs. 

Entre-temps, Apple a lance Safari pour Mac (2003) puis Windows (2009) pour 
fournir un navigateur de qualite a sa base d'utilisateurs grandissante, en declinant le 
moteur KHTML en WebCoreAVebKit. 

Google, devenu le plus celebre moteur de recherche et acteur majeur du Web, deve- 
loppe son propre navigateur Google Chrome a partir de septembre 2008 sur la base 
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d'un projet libre nomme Chromium, a un rythme extremement soutenu. Google 
souhaite privilegier la simplicite de navigation et les performances a 1' execution. 

Ces navigateurs alternatifs s'approprient petit a petit la plus grande part du marche. 
Mozilla Firefox dans sa version 3.0 devance peu a peu Internet Explorer dans cer- 
taines regions du monde et s'affirme comme une alternative de predilection avec de 
nombreux projets gravitant autour du moteur Gecko. 

Les navigateurs mobiles, versions derivees de leurs grands freres, conferent aux 
smartphones et tablettes tactiles la possibilite d'acceder au Web depuis que les capa- 
cites des reseaux sans fil permettent un debit d'acces acceptable et que la mobilite 
entre dans les moeurs. lis font alors appel a des comportements de navigation diffe- 
rents decoulant des temps de chargement et de la navigabilite au doigt. 

Microsoft sort finalement de sa lethargie et reprend un rythme de developpement hono- 
rable avec Internet Explorer 7 en 2006 pour l'occasion de la sortie de Windows Vista. 

Internet Explorer 8 pointe le bout de son nez en mars 2009. En juillet, le W3C annonce 
le non-renouvellement du groupe de travail XHTML 2.0 pour reunir les forces autour 
du groupe de travail HTML et clarifier sa position. Tandis que CSS 3 voit ses modules 
completes progressivement, la specification HTML 5 est desormais adoptee formelle- 
ment comme langage de predilection pour le Web par le W3C et le WhatWG. 

Des lors, tous les navigateurs s'y mettent et dopent chacune des versions publiees. 
Debut 2011, Microsoft publie Internet Explorer 9, precede de peu par Opera 11. 
Mozilla decide d'adopter un nouveau modele de developpement base sur plusieurs 
canaux (Aurora, version Beta, version Finale) pour diffuser les nouveautes plus rapi- 
dement. La numerotation des versions s'emballe a la facon de Chrome. 

A la rentree 2011, Microsoft surprend tout le monde en confirmant son interet pour les 
standards du web, et sa volonte de les exploiter a un haut niveau via le moteur d'Internet 
Explorer 10. Windows 8 est devoile avec une nouvelle interface baptisee Metro, qui 
interprete directement HTML 5, CSS 3 et JavaScript pour creer des applications. 



Curiosite HIST0RIQUE Les archives de Tim 

Le premier code source implementant HTML, ecrit par Tim Berners-Lee 

► http://www.w3.Org/History/1 991 -WWW-NeXT/lmplementation/HyperText.m 
La « premiere page » HTML 

► http://www.w3.Org/History/1 9921 1 03-hypertext/hypertext/WWW/Link.html 
Une des premieres ebauches detaillant les balises 

► http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html 
Une specification pour HTML 2.0 (novembre 1995) 

► http://www.w3.org/MarkUp/html-spec/index.html 

► http://www.ietf.org/rfc/rfc1 866.txt 
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Le role du W3C 



La mission du W3C est de developper et promouvoir des standards pour le Web afin 
d'en assurer la croissance et l'universalite. Ses membres et experts internationaux sont 
constitues en groupes de travail qui redigent ces standards. 



Figure 1-4 

Logo du W3C 



W5 



r 



® 



Le W3C est administre par trois entites : 

• le MIT (Massachusetts Institute of Technology) aux Etats-Unis ; 

• l'universite Keio au Japon ; 

• l'Ercim (European Research Consortium for Informatics and Mathematics) en 
Europe, remplacant de 1'INRIA francais. 

II regroupe environ 400 membres (organisations) et se voit desormais a l'origine de 
dizaines d'autres specifications et recommandations, telles que MathML, RDF, 
Soap, SVG, Smil, PNG, et autres variations autour de XML. 

Une maturation rigoureuse... 

Le processus d'ecriture et de validation des documents fait mention de statuts precis : 

1 Working Draft : brouillon de travail (WD). 

2 Last Call Working Draft : dernier appel pour modifications (LC). 

3 Candidate Recommendation : candidat a la recommandation (CR). 

4 Proposed Recommendation : recommandation proposee (PR). 

5 W3C Recommendation : recommandation W3C officielle (REC). 

Un brouillon (WD) est publie pour etre debattu par la communaute (membres du 
W3C, grand public, autres organisations). Une recommandation candidate (CR) est 
un document dont le W3C pense qu'il a ete largement examine et satisfait aux pre- 
requis techniques du groupe de travail. II s'agit alors de proceder a des implementa- 
tions concretes pour recueillir des retours d'experience. Est divulguee ensuite une 
recommandation proposee (PR), version plus mure etablie apres de larges applica- 
tions techniques et soumise au comite consultatif pour approbation finale. Quand il 
est clair qu'un support significatif est assure par le grand public et le W3C, la recom- 
mandation (REC) voit le jour, signifiant que le W3C recommande son vaste 
deploiement et la mise en application de son contenu. 
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En savoir plus Au sujet du W3C 

Standards et specifications (brouillons, recommandations, etc.) 

► http://www.w3.org/TR/ 
HTML Working Group 

► http://www.w3.org/html/wg/ 



... mais peu veloce 

Ces stades peuvent necessiter de longues periodes de relectures, tests et discussions 
pour evoluer favorablement en vue d'un consensus general. 

II en a ete ainsi pour CSS 2.1, qui a mis de nombreuses annees a atteindre l'etape de 
recommandation candidate (CR) en 2009 alors que des navigateurs l'implementaient 
bien avant cela a des degres divers. En automne 2010, le groupe de travail CSS offi- 
cialise la publication de la suite de tests pour CSS 2.1. Toutes les equipes de develop- 
pement des navigateurs majeurs acceptent de publier leurs rapports en consequence. 
C'est a l'appui de ces rapports une fois publies que les responsables du groupe de tra- 
vail peuvent enfin demander a la direction du W3C de passer en recommandation 
proposee (PR). Ce stade est atteint fin 2010. La tete du consortium annonce alors un 
appel a validation ( Call for Review of a Proposed Recommendation) a tous les membres. 
CSS 2.1 atteint enfin le statut de recommandation du W3C debut 2011. 

HTML 4.01 etait passe au stade de recommandation le 24 decembre 1999, en 
apportant quelques corrections mineures a la version 4.0. Quant a HTML 5, les 
navigateurs l'implementent progressivement sans attendre son accession a l'etape 
finale ; il est de notoriete publique qu'il n'est pas (absolument) necessaire d'attendre 
pour l'exploiter. Ainsi certaines versions de navigateurs l'integrent de facon partielle, 
d'autres mieux tout en necessitant encore des perfectionnements. Microsoft a deja 
mis en oeuvre quelques fonctions de HTML 5 depuis Internet Explorer 8 et de facon 
plus complete dans la version 9. 

En 2009, Ian Hickson, editeur de la specification HTML 5, avait annonce vouloir 
atteindre la recommandation candidate (CR) en 2012. Dans les faits et a partir de 
cette etape, le W3C reclame deux implementations completes et interoperables, avec 
de larges batteries de tests (plus de 20 000), pour aboutir a la recommandation finale, 
ce qui devrait en theorie, selon les pronostics de Ian, s'etablir aux alentours de 2022. 
Cette date peut effrayer, mais heureusement, HTML 5 sera en pratique depuis long- 
temps repandu et compris par les navigateurs. 

Debut 2011, un logo officiel a ete devoile pour faire la promotion de HTML 5. 
Celui-ci comporte toujours un numero de version et des declinaisons pour les sous- 
groupes de technologies : la semantique (semantics), l'execution (offline & storage), 
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Faeces au materiel et aux peripheriques (device access), la connectivite (connectivity), le 
multimedia (multimedia), le graphisme et les effets (3D, graphics & effects), la perfor- 
mance et l'integration (performance & integration), CSS 3. 



RESSOURCE Page du W3C dediee au logo et autres declinaisons 

► http://www.w3.org/html/logo/ 



Figure 1-5 HTML 

Logo HTML 5 par le W3C 



(XiiWib fvrAII 



Figure 1-6 

« Badge » HTML 
et technologies 







Le role du WhatWG 

Durant la meme periode, le WhatWG a annonce vouloir desormais parler unique- 
ment de « HTML » sans preciser de numero de version, en tant que partie des speci- 
fications Web Applications, qui sont toujours maintenues et qui comprennent les 
autres API web decrites dans cet ouvrage (Web Workers, Web Storage, etc.). Le 
groupe considere que la specification HTML made in WhatWG est desormais 
mature et quelle ne merite plus le statut de brouillon mais de norme de fait, ou living 
standard en anglais. 



Figure 1-7 

Titre de la page Web Applications 
par le WhatWG 



Web Applications 1 

Living Standard — 7 January 201 1 



CD 



Le WhatWG travaille desormais en tandem avec le W3C, qui tire des 
« instantanes » de la specification du WhatWG. Le but est de pouvoir fournir une 
specification stable aux editeurs de navigateurs et developpeurs qui ont de fortes con- 
traintes d'interoperabilite. 
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Les fondements de revolution 

Comme dans toute evolution de langage, des compromis ont du etre effectues. Prin- 
cipalement pour rectifier des erreurs commises par le passe, ou pour asseoir de 
meilleures pratiques de conception. Ainsi, I'accessibilite joue souvent un grand role 
dans les decisions prises pour la creation, la modification ou la suppression d'ele- 
ments/attributs. Certains elements de HTML 4.01 ont ete abandonnes (declares 
obsoletes), notamment ceux jouant un role de presentation tels que <font> et 
<center>, etant avantageusement remplaces par les feuilles de style CSS. 

Depuis la specification de HTML 4, les applications concretes se sont faites plus 
nombreuses, et les internautes sont passes du stade de passionnes privilegies et inities 
au high-tech, a un grand public avide de contenus varies et verse dans l'e-commerce 
ou les reseaux sociaux. La ou Ton pouvait se contenter de pages statiques, il est 
aujourd'hui impensable de ne pas proposer des sites dynamiques, alliant animations, 
audio, video, composants interactifs. 

HTML 5 se propose de redevenir la reference en termes de standard ouvert pour des 
applications en lieu et place de technologies telles que Flash (voire Silverlight, Java, 
etc.) dont la croissance a ete rapide. Avec l'inauguration d'API orientees vers le gra- 
phisme, la video, l'audio, et la communication, HTML peut desormais pretendre a la 
creation de jeux de haute qualite et d'applications tres riches visuellement. 

La simplification du langage a pour but de faciliter son apprentissage et de le mettre 
a portee de tout debutant qui souhaiterait s'initier au HTML. On notera comme 
exemple parfait le nouveau doctype unique (<!D0CTYPE html>) qui facilite grande- 
ment le choix par rapport aux precedentes versions necessitant une connaissance des 
subtilites entre variantes : Strict, Transitionnel, Frameset. 

Lapproche reste pragmatique au sein du groupe de travail HTML. Le but est de 
suivre des principes clairs pour favoriser l'adoption de la version 5 du langage : 

• grace au support des contenus existants « Support Existing Content » et la defense 
de revolution plutot que la revolution {Evolution Not Revolution pour la retro- 
compatibilite HTML4) ; 

• grace au principe de la degradation gracieuse « Degrade Gracefully » : un nouvel 
element doit permettre de tolerer une alternative ou une emulation, et de ne pas 
perdre une fonctionnalite essentielle lorsqu'il n'est pas compris ; 

• grace a la prise en compte des implementations existantes dans les navigateurs 
« Do not Reinvent the Wheel » (ne pas reinventer la roue) et a leur assimilation par 
les auteurs web « Pave the Cowpaths » (paver le chemin deja trace) ; 

• grace a la defense de l'interoperabilite et de I'accessibilite universelle (indepen- 
dance du media, support des langues internationales et des contenus alternatifs). 
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Specification Principes du W3C 

Les lignes directrices de la conception de HTML 
► http://dev.w3.org/HTML5/html-design-principles/ 



En quoi consiste reellement HTML 5 ? 

Du point de vue du balisage, HTML 5 inaugure de nouveaux elements pour de nou- 
veaux usages, afin de repondre aux besoins grandissants des internautes. 

• Les premiers permettent d'ajouter une valeur semantique aux blocs generiques 
precedemment definis par les elements div et span. C'est le cas notamment de 
article, aside, footer, header, section et nav. 

• Les suivants apportent de nouvelles fonctionnalites aux pages web, c'est le cas 
notamment de audio et video. 

Bien entendu, l'introduction de ces nouvelles balises represents la partie la plus visible et 
la plus facile a aborder lorsqu'il s'agit de concevoir des pages web. Figurent aussi des 
API (Application Programming Interfaces) pour etendre les possibilites dynamiques du 
langage et d'interaction avec le DOM (Document Object Model), entre autres pour : 

• le stockage de donnees cote client, 

• 1' element canvas (dessin 2D et 3D), 

• les microformats, 

• la lecture de medias (audio, video), 

• le glisser-deposer (drag & drop), 

• la communication bidirectionnelle {sockets, push, interdocuments), 

• la geolocalisation, 

• la gestion des applications web hors-ligne, 

• la lecture et l'ecriture de fichiers locaux, 

• la gestion de l'historique du navigateur, 

• et bien d'autres a venir... 

Survient alors un probleme de classification : toutes ces technologies ne sont pas 
necessairement incluses dans la specification HTML 5 du W3C bien qu'elles le 
soient pour la plupart dans celle du WhatWG. Elles font alors l'objet d'une publica- 
tion separee. Cependant, elles sont tres souvent reunies par les medias par abus de 
langage sous le terme « HTML 5 », car developpees en parallele et utilisees en 
osmose avec HTML. 
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Certains brouillons sont uniquement presents cote WhatWG et n'ont fait l'objet 
d'aucune implementation dans les navigateurs. C'est par exemple le cas, en 2011, de 
l'interface PeerConnection qui est promise a un grand avenir dans la videoconference, 
et d'un gestionnaire d'annulations baptise UndoManager. 

Cet ouvrage traite done volontairement de specifications reputees ne pas faire partie 
du document HTML 5 heberge par le W3C, mais qui sont pourtant exploitees de 
concert, specifiees, et implementees durant la meme periode par les navigateurs. 



Specification HTML 5 version W3C et WhatWG 

La specification HTML 5 du cote du W3C 

► http://www.w3.org/TR/HTML5/ 

► http://dev.w3.org/HTML5/spec/Overview.html 
La specification HTML/HTML 5 du cote du WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/ 

► http://www.whatwg.org/html 
Web Applications par le WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/complete/ 



Differences depuis HTML 4.01 et XHTML 1.x 

Outre la transformation de la philosophic de developpement autour de HTML 5, 
voici un resume des differences notables : 

• de nouvelles regies d'analyse syntaxique ; 

• la possibilite d'utiliser SVG ou MathML au sein de HTML ; 

• les nouveaux elements: article, aside, audio, canvas, command, datalist, 
details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, 
meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, 
vi deo, wbr ; 

• de nouveaux types pour l'element <input> (color, date, datetime, datetime- 
local, email, month, number, range, search, tel, time, url, week) ; 

• de nouveaux attributs specifiques, par exemple ping (pour <a> et <area>), 
charset (pour <meta>), async (pour <script>) ; 

• de nouveaux attributs globaux : contentedi table, contextmenu, spell check, 
draggable, hidden, role, aria-*, data-* ; 

• des elements deprecies : acronym, applet, basefont, big, center, di r, font, 
frame, frameset, isindex, noframes, s, strike, tt, u. 
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HTML 5 = HTML + JavaScript + CSS (3) ? 

De nos jours, les differents langages pouvant etre mis en jeu pour la composition 
d'une page web (ou d'une application web) sont tees intimement lies. Ainsi, Ton voit 
souvent regroupes HTML 5, JavaScript et CSS (dans sa version 3 en cours d'elabo- 
ration) sous le terme generique HTML 5 lui-meme. 

II s'agit bien la d'un abus de langage, mais un abus justifie : le contenu (HTML) etant 
bien dissocie de la forme (CSS), mais peu exploitable pour les visiteurs sous une forme 
brute sans mise en pages, et peu dynamique sans langage de script pour des interactions 
avec le contenu de la page lui-meme. II est done difficile de se servir de Fun sans l'autre 
pour la creation de sites complets. HTML 5 est la pierre angulaire de ledifice. 

On pourra aussi noter la coincidence - ou plutot la concomitance - de la periode de deve- 
loppement de CSS 3, qui est somme toute logique dans le processus d'evolution des lan- 
gages web, mais qui associe bien souvent les deux dans les demonstrations technologiques. 

De meme, HTML 5 est livre avec plusieurs API evoluees qui se manipulent avec 
JavaScript. Les moteurs les plus recents embarquent des avancees majeures pour 
JavaScript : 

• la nouvelle version du langage ECMAScript 5, incluant 1API JSON et le mode 
strict (strict mode) ; 

• les tableaux types natifs pouvant representer un gain de performance ; 

• XMLHttpRequest 2 et les objets FormData ; 

• 1API Selectors etl'attribut classList ; 

• les attributs async et defer ; 

• et toutes les autres ameliorations mineures au niveau atomique qui soulagent le 
developpeur de facon majeure. 

Les implications du point de vue du developpement et de l'integration sont des lors plus 
complexes que par le passe. La synergie de ces trois langages parait desormais essentielle 
pour concevoir un site web attractif ou une application web multi-plate-forme. 

HTML 5 n'est pas un tout monolithique. C'est un ensemble de fonctionnalites indi- 
viduelles, baties autour d'un langage retrocompatible. Cette approche va permettre 
d'implementer certaines d'entre elles progressivement dans les navigateurs, avec 
l'inconvenient de devoir se preoccuper du support de ces fonctionnalites les unes 
apres les autres, voire de proposer des alternatives de remplacement pour ne pas 
alterer le confort de l'utilisateur. 
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Figure 1-8 

Couteau Suisse du Web 




Le concept cle de la retrocompatibilite merite que Ton s'attarde encore un peu sur 
lui. Dans son acception generale, il signifie que les navigateurs interpretant 
HTML 5 doivent aussi continuer a interpreter les pages concues en HTML 4.0, 
4.01 et XHTML 1.0. La specification definit bien quels elements sont obsoletes 
(indiques en detail dans les annexes), mais aussi comment continuer a les prendre en 
charge, ce qui place les precedentes versions de HTML comme un « sous- 
ensemble » de cette nouvelle evolution. Si vous concevez des pages HTML, elles 
sont deja en HTML 5. 

Pourquoi des standards pour le Web ? 

Les standards web sont gages d'interoperabilite et de perennite. Contrairement aux 
technologies proprietaires, personne ne peut reclamer de droits pour les utiliser. lis 
permettent de definir une maniere universelle de creer les pages web sans les ecrire a 
destination d'un logiciel en particulier - comme on a pu le voir au temps de la 
« guerre des navigateurs » et des pages « optimisees » pour certains d'entre eux. 

L adhesion a des normes reconnues mondialement facilite la structuration et le bali- 
sage des documents, reduit les couts associes a la production de sites. Elle permet 
aussi de garder un cuir chevelu sain, en evitant de s'arracher les cheveux avec la con- 
ception de pages interpretees de facon commune sur la plupart des navigateurs. 
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Un langage est un ensemble de signes, dote d'une semantique et d'une 
syntaxe. HTML ne deroge pas a la regie. Voyons ce que sont ses balises et 
attributs chevronnes, et comment CSS, JavaScript, et HTTP s'articulent. 




Figure 2-1 Etat d'esprit 



HTML 5 - Une reference pour le developpement web 



HTML est un langage de description de document. Sa syntaxe provient du SGML 
( Standard Generalized Markup Language) et fait appel a des balises pour structurer le 
document. 

II est interprete par des « agents utilisateurs » (des navigateurs web dans la plupart 
des cas) pour permettre une consultation intelligible a l'internaute, en appliquant 
eventuellement une presentation definie par une feuille de style externe. 

On y retrouve des textes, des images, des videos, des liens vers d'autres documents et 
bien d'autres elements qui ont chacun un role precis a exercer. 

Une page web va consister en un fichier de type texte - par opposition a un fichier 
binaire qui contient des donnees difficilement lisibles par un humain normalement 
calibre - que tout un chacun est libre d'editer dans son editeur de texte favori puis de 
consulter egalement dans son navigateur favori. 

Dote communement de l'extension . html , un fichier source peut etre stocke et lu sur 
un ordinateur local, ou via Internet s'il est stocke sur un serveur web. Dans ce dernier 
cas, ce fichier peut aussi etre produit par un langage de programmation execute sur 
un serveur. L'extension pourra alors etre differente (par exemple .php avec PHP, ou 
quoi que ce soit d'autre, pourvu que le code delivre soit toujours du HTML). 

La methode la plus simple pour experimenter, tester, construire un beau fichier 
HTML, reste l'ouverture d'un editeur de texte (voir suggestions ci-apres), la redac- 
tion de quelques lignes de code, la sauvegarde sous une extension . html appropriee 
(par exemple i ndex . html ), et l'ouverture par un clic dans le navigateur web. Un jeu 
d'enfant, n'est-ce pas ? 



Figure 2-2 

Le code source HTML 
et son interpretation 
dans un navigateur 



G ft IO\ 



fr.wikipedia.org 



y-.t a >t *■ 



in : D - * * 



Kiwi 



18 



2 - HTML en seconde langue 



La notion d'agent utilisateur {user-agent en anglais) sera employee alternativement 
dans cet ouvrage aux cotes des navigateurs qui en forment un sous-ensemble. Un 
agent utilisateur peut aussi etre un lecteur d'ecran (synthese vocale), une plage braille, 
ou un robot d'indexation pour les moteurs de recherche. Son role est de dialoguer 
avec le serveur web avec un protocole etabli (HTTP) en s'identifiant (via les en-tetes 
HTTP) et en interpretant les informations qui lui sont retournees (en-tetes HTTP 
et code HTML, les fichiers medias). 



La syntaxe HTML 5 

La syntaxe de HTML 5 reprend bien entendu les principes edictes pour HTML 4 afin 
d'assurer la compatibilite ascendante vis-a-vis des navigateurs dont certains sont vic- 
times d'une inertie bien pesante : elle a ete pensee pour ne pas les derouter totalement 
si ceux-ci sont amenes a rencontrer de nouvelles balises (au pire, elles seront ignorees). 

De meme, un document HTML 5 debutera toujours par une ligne nommee doctype qui 
ressemble a une declaration SGML, et qui permet de passer en mode de rendu conforme 
aux standards dans les navigateurs analysant la declaration de type (doctype sniffing). Bien 
que tres ressemblante, la syntaxe HTML 5 n'est pourtant plus basee sur SGML. 

Rappel sur les balises 

Les balises HTML structurent le contenu du document, en delimitant des blocs qui 
seront amenes a contenir des paragraphes, des titres, differents types de medias 
(images, sons, videos), des controles de formulaires ou encore des liens hypertextes. 
Une balise debute par le signe « inferieur a », et finit par le signe « superieur a » ; on 
parle aussi de chevrons. II s'agit alors d'une balise ouvrante : 

<P> 

Son nom, indique entre les chevrons, definit son role. Ici, <p> marque le debut d'un 
paragraphe. Pour marquer la fin du paragraphe, on fait appel a une balise fermante, 
dont le nom est cette fois-ci precede du caractere slash : 

</P> 

Tout ce qui se situe entre les deux, represente le contenu de l'element HTML. 
<p>Ceci est un paragraphe. </p> 
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II existe des balises autofermantes, definies en tant que telles pour ne posseder aucun 
contenu particulier. C'est le cas de <hr> qui correspond a une separation horizontale, 
mais qui ne peut contenir aucun texte ou aucun autre element, et de <br> qui corres- 
pond a un saut de ligne. 

Les elements HTML 5 repondant a cette definition sont area, base, br, col, 
command, embed, hr, img, input, keygen, link, meta, param, source, wbr. 

Une balise definit la semantique, le comportement et eventuellement une apparence 
predefinie via la feuille de style interne du navigateur. Reportez-vous au chapitre 4 
decrivant en detail les elements HTML 5. 

Imbrications et types de contenu 

Les elements peuvent se succeder - par exemple plusieurs paragraphes -, mais aussi 
s'imbriquer pour conferer une hierarchie au document - par exemple plusieurs para- 
graphes dans une section. On obtient alors un arbre « genealogique » de balises, cha- 
cune pouvant etre parent ou enfant d'une autre. 

Ces possibilites d'imbrications doivent repondre a des criteres stricts qui definissent 
quels elements peuvent en contenir d'autres, et quelles sont les consequences en 
termes d'affichage ou de semantique. 

En HTML 5 plusieurs categories peuvent etre evoquees : 



Type 


Role 


Exemples 


Metadonnees 


Presentation ou 
comportement 


base, command, link, meta, noscript, script, 
style, title 


Flux 


Contenu structure 


texte simple et elements a , abbr, address, area, 
article, aside, audio, b, bdi , bdo, 
blockquote, br, button, canvas, cite, code, 
command, datalist, del, details, dfn, div, 
dl , em, embed, fieldset, fi gure , footer , form, 
hi, h2, h3, h4, h5, h6, header, hgroup, hr, 
i, i frame, img, input, ins, kbd, keygen, 
label, map, mark, math, menu, meter, nav, 
noscript, object, ol , output, p, pre, 
progress, q, ruby, s, samp, script, section, 
select, small, span, strong, style, sub, sup, 
svg, table, textarea, time, ul , var, video, 
wbr 


Section 


En-tete et pied de page 


article, aside, nav, section 


Titrage 


Titres et sous-titres 


hi, h2, h3, h4, h5, h6, hgroup 
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Type 



Exemples 



Texte 


Texte du document 


- ■ ■ i * ' i * j_ II i" i 

texte simple et elements a, abbr, area, audio, b, 
bdi , bdo, br, button, canvas, cite, code, 
command, datalist, del, dfn, em, embed, i, 
i frame, img, "input, ins, kbd, keygen , label, 
map, mark, math, meter, noscript, object, 
output, progress, q, ruby, s, samp, script, 
select, small, span, strong, sub, sup, svg, 
textarea, time, var, video, wbr 


Contenu embarque 


Ressources externes a 
inclure dans le document 


audio, canvas, embed, i frame, img, object, 
video, svg 


Contenu interactif 


Destine a I'interaction 
avec I'utilisateur 


a, audio, button, details, embed, i frame, 
img, input, keygen, label, menu, object, 
select, textarea, video 



Selon le contexte, elks peuvent se recouvrir et ne sont pas exclusives. D'autres ele- 
ments tres particuliers ne sont pas categorises. 

Par exemple, une liste non ordonnee (element ul) se devra toujours de posseder des 
sous-elements de liste (elements li). Ceux-ci seront situes entre la balise ouvrante 
<ul> et la balise fermante </ul>. On dit alors qu'ul est parent de li, ou que li est 
enfant d'ul . Par ailleurs, les 1 i sont « freres » entre eux. 



Liste HTML 



<p>Ma liste de fruits :</p> 
<ul> 

<1 i>Kiwi</l i> 
<1 i>Goyave</l i> 
<1 i>Peche</l i> 
</ul> 

Cette regie est transposable sur plusieurs niveaux, virtuellement une infinite pour peu 
que les elements l'autorisent. Ainsi, Ton peut ajouter une balise <strong> a l'interieur 
d'un <1 i> car son type l'autorise. 

Liste HTML 



<p>Ma liste de fruits :</p> 
<ul> 

<li>Coyave</li> 

<li>Kiwi <strong>mon prefere</strongx/l i> 

<li>Peche</li> 

</ul> 
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Ce principe decoule d'une classification de niveaux qui est somme toute logique, 
derivee des principes du HTML 4. Globalement, un element de type bloc (bloc- 
level) peut contenir soit d'autres blocs et du contenu texte, soit uniquement des ele- 
ments de type en ligne (inline) et du contenu texte. Par exemple : 

• di v : autres elements blocs (ex : di v, p, section), elements en ligne et texte. 

• p : uniquement elements en ligne (ex : span, strong). 

Un element de type en ligne ne peut pas contenir d'elements de type bloc, mais uni- 
quement d'autres elements en ligne ou du contenu texte. Par exemple, span et strong 
ne peuvent contenir que des elements en ligne. 

Cette distinction est visible dans le navigateur car celui-ci : 

• affecte par defaut la propriete CSS display: block a un element de type bloc qui 
occupera de facto toute la largeur possible et commencera sur une nouvelle ligne ; 

• affecte par defaut la propriete CSS di spl ay : i nl i ne a un element de type en ligne 
qui pourra s'enchainer avec d'autres elements de ce type sans provoquer de retour 
a la ligne (tant que la place disponible horizontalement le permet). 

A l'origine, I'idee de ces differences provient du fait que les elements de type bloc 
creent des structures plus larges que les elements de type en ligne. 

Ces notions ont ete revisees avec HTML 5, si bien que les distinctions ne sont plus 
aussi tranchees. Par exemple, il est desormais possible d'encadrer des balises bloc par 
un lien (element a), ce qui n'etait pas valide precedemment. De meme, on attend 
d'un element hgroup qu'il ne contienne que des elements hi a h6. 

Imbrication autorisee 

<p>Ceci est un <strong>paragraphe important</strong>.</p> 

Tandis qu'il n'est pas autorise de placer un paragraphe dans un autre. 
Imbrication incorrecte 

<p>On ne peut inclure un <p>paragraphe dans un autre paragraphe</p>.</p> 

Structure generate d'un document HTML 

Le document HTML possede par defaut une tete et un corps. La tete (element 
head) definit les proprietes globales du document (titre, apparence, meta-informa- 
tions) tandis que le corps (element body) renferme des balises de contenu. Void la 
structure minimale d'un document HTML : 
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Modele de document HTML 5 simple 

<!doctype html> 

<html> 

<head> 

<ti tl e>Ti tre du document</ti tl e> 
</head> 
<body> 

</body> 
</html> 

En realite, la specification autorise « l'oubli » des balises html, head et body, si bien qu'un 
document encore plus reduit est possible, en omettant egalement le contenu du titre. 

Un document HTML 5 minimaliste 

<!doctype html> 
<titlex/title> 

Attributs 

Les attributs modifient les proprietes des balises HTML. Un element peut com- 
porter zero ou plusieurs attributs, choisis parmi un ensemble specifique a cet element 
ou un ensemble commun a tous les elements HTML. 

Dans certains cas de figure, ils sont essentiels, tels que 1'attribut src pour img, preci- 
sant le nom du fichier image a afficher dans la page. 

<img src=photographie. jpg> 

Dans d'autres cas, ils peuvent etre facultatifs, tels que class ou id, qui permettent de 
nommer les elements pour interagir avec ceux-ci, ou pour leur affecter des proprietes 
de style. 

<p id=i ntroducti on> 

Ils font partie integrante de la balise ouvrante, avec une syntaxe tres simple : 
• S'il s'agit d'un attribut booleen, la presence seule de l'attribut suffit a lui donner du 
sens, quelle que soit sa valeur. Notons dans cette categorie checked, qui definit l'etat 
par defaut d'une case a cocher. Sa presence coche la case (par exemple avec checked, 
checked=true, checked=l, checked=checked, checked=icanhascheezburger). 
Son absence la laisse « vide ». En mode XHTML, on repete son nom pour sa valeur 
(checked="checked") pour respecter la syntaxe XML. 
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• S'il s'agit d'un attribut requerant une valeur, on indique le nom de cet attribut, suivi 
du signe egal, suivi de la valeur a lui attribuer. Si la valeur comporte des espaces, il 
faut l'entourer de guillemets simples ou doubles, de maniere a bien signaler l'eten- 
due de l'attribut et eviter qu'une separation (une espace) n'engendre un autre attri- 
but. D'une facon plus generale, il est recommande de toujours utiliser des guille- 
mets, cela previent beaucoup d'erreurs sur le long terme et facilite la lecture du code. 
Cela sera la convention adoptee dans cet ouvrage et les blocs de code presentes. 

Dans tous les cas, plusieurs attributs doivent etre separes par des espaces. 
<img src=photographi e . jpg alt="Mon portrait" hidden> 

Dans cet exemple, Ton se refere a une image (element i mg) : 

• stockee dans le fichier externe photographie.jpg situe dans le meme repertoire 
que la page HTML ; 

• comportant une alternative texte decrivant son contenu (pour les utilisateurs 
ayant desactive les images ou active une synthese vocale) de valeur « Mon 
portrait » ; 

• cachee par defaut grace a l'attribut booleen hidden, introduit en HTML 5. 

Les commentaires 

A l'instar des autres langages, HTML comprend la possibilite d'annoter le document 
par des commentaires. Ceux-ci ne seront pas affiches par le navigateur. lis pourront 
vous servir d'aide-memoire, ou d'indications pour suivre l'imbrication de balises 
lorsque le document devient plus consequent. Un commentaire debute par <!-- et 
finit par -->. 

Modele de document HTML 5 

<!doctype html> 

<htm"l> 

<head> 

<meta charset="utf-8"> 

<title>Ma page HTML5</ti tl e> 
</head> 
<body> 

<p id="i ntroduction">Mon paragraphe d'introduction</p> 
<img src=photographie. jpg alt="Mon portrait"> 
<!-- Un commentaire masque --> 
</body> 
</htm"l> 
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Lencodage des caracteres 

Le codage des caracteres est present depuis les debuts de 1'informatique. II definit la 
maniere de stacker en binaire - le seul langage compris par les processeurs - les 
caracteres typographiques humains. 

Aux debuts du regne des puces, chaque caractere etait stocke sur 7 bits grace au code 
ASCII, ce qui permettait, avec une economie de stockage, jusqu'a 127 possibilites 
pour numeroter les caracteres (lettres de l'alphabet en minuscules, majuscules, chif- 
fres, signes de ponctuation, signes mathematiques). Cela convenait parfaitement a 
un usage limite aux Etats-Unis. 

II a fallu ensuite etendre 1ASCII sur 8 bits et creer de nouvelles pages de caracteres, 
comprenant notamment les caracteres accentues internationaux. En Europe occiden- 
tale, cette norme fut labellisee ISO-8859-1 aussi connue sous le nom Latin-1. 
L'ISO-8859-15 (Latin-9) en est une mise a jour apportant quelques nouveaux carac- 
teres, dont notamment le caractere de l'euro. 

Les Asiatiques ont introduit leurs propres jeux de caracteres, et ainsi de suite, avec 
pour consequence des documents illisibles a l'international selon le code utilise pour 
interpreter les caracteres et 1' exactitude de la correspondance. 

L'UTF-8 (UCS transformation format 8 bits) permet de resoudre en partie les diffi- 
cultes rencontrees, avec un codage exploitant entre 1 et 4 octets par caractere pour 
etendre le nombre de combinaisons possibles. II fait partie des normes definies par le 
consortium Unicode et presente l'avantage d'etre relativement compatible avec les 
logiciels encore prevus pour traiter les caracteres sur un octet unique. L'Unicode a 
pour objectif de definir un identifiant unique pour les caracteres de tous les systemes 
d'ecriture, comprehensible quelle que soit la plate-forme informatique ou le logiciel. 

Desormais, Y Internet Engineering Task Force (IETF) et le W3C approuvent le choix 
de l'UTF-8 et prescrivent son usage pour tout protocole echangeant du texte sur 
Internet, dont evidemment HTML et HTTP. 

Choisir l'encodage des pages et bien comprendre son implication dans l'interpreta- 
tion est done essentiel. II faudra toujours le choisir en adequation avec la chaine des 
programmes et langages mis en jeu dans la generation et la livraison d'une page. 

Chaque maillon (systeme de fichiers, serveur, base de donnees, langage interprete) se 
doit de savoir dans quel format sont stockees (ou recues) les donnees, puis dans quel 
format celles-ci sont envoyees au maillon suivant, jusqu'a interpretation finale par le 
navigateur. 



25 



HTML 5 - Une reference pour le developpement web 



Le type MIME 

Le format MIME (Multipurpose Internet Mail Extensions) est a l'origine un standard 
qui ajoute des codages supplementaires a l'ASCII pour l'envoi des e-mails et le sup- 
port de donnees non textuelles, c'est-a-dire de fichiers binaires. 

Les types MIME sont aujourd'hui egalement utilises en HTTP pour affiner le dialogue 
entre le navigateur et le serveur web, et preciser quels sont les types de fichiers echanges. 

Une declaration MIME est constitute de deux parties (normalisees) : un type et un 
sous-type, separes par un caractere slash. Ceux debutant par x- ne sont pas standar- 
dises, et les prefixes vnd . font reference a une propriete du vendeur. 

Tableau 2-1 Quelques types MIME celebres 



Type MIME 


Usage 


application/javascript 


Script JavaScript (anciennement text/javascript) 


application/octet-stream 


Flux de donnees (type inconnu ou fichiers executables) 


application/xhtml + xml 


XHTML 


application/x-shockwave-flash 


Animation Adobe Flash 


application/vnd.ms-excel 


Fichier Excel (Microsoft) 


application/msword 


Fichier Word (Microsoft) 


application/vnd.openxmlformats- 
officedocument.wordprocessingml. document 


Fichier Word (Microsoft) de type Open XML 


application/vnd.ms-powerpoint 


Fichier Powerpoint (Microsoft) 


application/vnd.oasis.opendocument.text 


Fichier texte OpenDocument 


application/vnd.oasis.opendocu- 
ment.spreadsheet 


Fichier de feuille de calcul OpenDocument 


application/ 

vnd.oasis.opendocument.presentation 


Fichier presentation OpenDocument 


audio/mpeg 


Audio MPEG ou MP3 


image/gif 


Image GIF 


image/jpeg 


Image JPEG 


image/png 


Image PNG 


image/svg+xml 


Image SVG 


text/ess 


Feuille de style CSS 


text/html 


HTML 


text/plain 


Texte simple 


text/xml 


XML 


video/mpeg 


Video MPEG 


video/mp4 


Video MP4 


video/x-flv 


Video FLV Flash Video (Adobe) 
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II incombe en general - sauf indication contraire - au serveur web de determiner le 
type du fichier heberge, la plupart du temps grace a son extension, pour l'indiquer au 
navigateur dans les en-tetes HTTP en preambule du telechargement du fichier. 
Celui-ci pourra done anticiper l'usage qui doit en etre fait : interpreter son contenu 
et l'afficher (pages web, textes) ou le proposer au telechargement (fichiers binaires). 

Comment le navigateur determine-t-il I'encodage 
des caracteres et le type MIME ? 

En HTML 5, le navigateur se base avant tout sur l'en-tete HTTP Content-Type 
fourni par le serveur (si celle-ci est presente). Les en-tetes peuvent etre facilement 
surveilles grace a des extensions navigateur telles que Firebug (onglet Reseau) pour 
Mozilla Firefox. 

Content-Type: text/html ;charset=UTF-8 

Du point de vue du serveur, il est possible de modifier ces en-tetes delivres pour le 
document de differentes facons. Dans la plupart des cas, un fichier .htaccess peut 
etre exploite avec le serveur web Apache, ou bien une instruction PHP placee en 
debut de fichier. 

<?php 

header ('Content-Type: text/html ; charset=UTF-8 ' ) ; 

?> 

On y precise le type MIME, separe du charset (ou character set en anglais) par un 
point-virgule. 

Si aucun en-tete HTTP n'est present, le navigateur tente de detecter le marqueur 
Bom (Byte Order Mark) en debut de fichier. Toutefois, ce marqueur ajoute par les 
editeurs de texte est souvent source de difficultes, car il peut provoquer l'affichage de 
caracteres indesirables en haut de page s'il est mal interprete : i . 

En dernier recours, l'utilisation de la balise meta dans la section <head> du code 
source HTML pourra definir I'encodage de caracteres utilise dans le document. II 
s'agit d'une syntaxe deja employee par les precedentes versions de HTML, mais cette 
fois-ci dans une ecriture simplifiee : 

<meta charset="UTF-8"> 
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HTML 5 ou XHTML 5 ? 

Vous avez la possibilite d'ecrire un document grace a la forme HTML et la forme 
XHTML. 

En theorie, les navigateurs embarquent deux moteurs d'analyse syntaxique : un qui 
sera charge du HTML, et l'autre du XML. lis sont invoques d'apres la detection du 
type MIME. 

Forme HTML 

Cela suppose que le document soit servi avec le type MIME text/html . 
Dans la forme HTML, vous etes autorise a : 

• omettre certaines balises fermantes (voire ouvrantes) ; 

• utiliser minuscules et majuscules pour les noms d'elements et d'attributs, car ils ne 
sont pas sensibles a la casse ; 

• ne pas entourer vos attributs de guillemets (s'ils ne contiennent pas d'espaces) ; 

• utiliser malgre tout un caractere slash final pour la fermeture des elements auto- 
fermants (tels que <i mg />) pour ne pas perdre les habitudes de la forme XML 
plus rigoureuse et « bien formee ». 

Dans le fond, aucune erreur n'est fatale. La syntaxe est plus permissive que celle de 
XHTML. En revanche, contrairement a ses predecesseurs, HTML 5 definit des 
regies detaillees d'analyse pour les moteurs de parsing afin d'obtenir le meme resultat 
en cas de syntaxe incorrecte dans un document. 

C'est par ailleurs cette tolerance qui a permis aux pages HTML 4 non valides de 
proliferer sur le Web, etant donne que le navigateur ne produit pas de message 
d'erreur particulier et les affiche au mieux en « corrigeant » globalement la page si 
une erreur de balisage est rencontree. 

Forme XHTML 

Si vous avez deja utilise XHTML par le passe et que sa syntaxe plus rigoureuse vous 
est familiere, ne vous inquietez pas : dans la forme XHTML, vous pouvez continuer 
a utiliser ces acquis (voir ci-apres). 

II s'agit alors d'un balisage polyglotte, les documents XHTML devenant « compatibles 
HTML » et produisant le meme arbre DOM apres analyse XML ou HTML. 
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Ce que vous savez sur XHTML est probablement faux 

Lorsque Ton park de XHTML, il convient de distinguer deux cas de figure : 

• La plupart des pages XHTML presentes sur Internet sont servies en realite avec 
un en-tete HTTP text/html, c'est-a-dire qu'elles ne sont pas analysees par le 
moteur d'analyse syntaxique XML et qu'une erreur n'est pas fatale. Ce qui 
n'empeche absolument pas de bien formater le document, bien sur, celui-ci sera 
simplement interprete « a la facon » du HTML. 

• Si Ton souhaitait se conformer strictement a l'usage ideal de XHTML tel que 
defini par le W3C, il faudrait delivrer tous ces documents avec le type MIME 
appl i cati on/xhtml +xml (ou appl i cati on/xml ). Ce dernier contraint le navigateur 
a activer l'analyse XML pour le document et a l'arreter lorsqu'une erreur est rencon- 
tree en affichant un message de diagnostic. Dans la pratique, vous comprendrez que 
ce mode est risque pour la plupart des sites web avec des implications qui peuvent 
etre relativement graves si le site web necessite une disponibilite de tous les instants 
(e-commerce, institutions, actualites, reseaux sociaux) et que la validation constante 
de toutes ses pages doit etre irreprochable. Le message est d'autant plus deroutant 
pour l'internaute qui ne comprendra absolument pas pourquoi on l'empeche de 
consulter la page web. De plus, Internet Explorer ne disposait d'aucun support reel 
pour XHTML et sa version 6 n'a jamais supporte appl i cati on/xhtml +xml. 

C'est pourquoi Ton a dedaigne dans l'immense majorite des cas de servir le 
XHTML 1.0 avec 1'en-tete appl i cati on/xhtml +xml pour ne pas reveiller le monstre 
XML tapi dans le navigateur et sa susceptibilite de lama mal reveille. Dans la specifi- 
cation, le W3C tolerait l'emploi de Content-type: text/html avec la premiere ver- 
sion de XHTML. Ce n'etait plus possible avec les versions 1.1 et 2.0 qui ont elimine 
cette indulgence, ce qui n'a bien evidemment pas milite en faveur de leur adoption. 

De surcroit, le passage ulterieur de text/html vers appl i cati on/xhtml +xml sera un 
exercice perilleux au regard des criteres a respecter, par exemple celui de l'echappe- 
ment par <! [CDATA[ du contenu des balises <script> et <style> qui sont des don- 
nees #PCDATA et non XML. 

RESSOURCE Debat HTML/XHTML servi en text/html 

Ian Hickson decrit parfaitement les implications de cette alternative (en anglais) 
► http://hixie.ch/advocacy/xhtml 

Du vrai XHTML 5 

II est tout a fait possible d'exploiter le mode faisant reellement appel a la syntaxe et a 
l'analyse XML, que Ton nomme plus communement desormais « XHTML 5 ». 
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L'avantage est de pouvoir l'etendre par d'autres technologies XML telles que SVG 
(dans le corps du document) ou MathML. 

Ce dernier exploite bien entendu les memes balises et attributs, mais avec les con- 
traintes supplementaires du XML : 

• a une balise ouvrante < doit toujours correspondre une balise fermante </ ; 

• les balises autofermantes (par exemple pour les elements img, br) doivent etre clo- 
ses avec soin (<img />, <br />) ; 

• l'ordre d'imbrication des balises doit etre strictement respecte ; 

• le nom des attributs et des balises doit etre ecrit en minuscules ; 

• la valeur des attributs doit etre encadree de guillemets doubles "" . 

Cela signifie done que vous l'utiliserez a vos risques et perils, car si le navigateur 
fonctionne dans ce mode XML et detecte une erreur de syntaxe, il sera susceptible 
d'afficher une erreur en lieu et place de l'affichage de la page. 

Figure 2-3 

Un message d'erreur d'analyse Erreur d'analyse XML : mal forme 

XML affiche par Mozilla Firefox Emplacement : file:///xhtml5.xhtml 

Numero de ligne 9, Colonne 12 : 

<p cl as s=introduc ti on>Paragraphe< /p> 



Si vous souhaitez adopter cette ligne de conduite, e'est-a-dire employer une syntaxe 
XHTML 5, il vous faudra servir vos documents avec le bon type MIME en utilisant 
l'en-tete HTTP Content-Type et le type MIME applicati on/xhtml +xml ou 
application/xml. En revanche, le rendu ne sera pas possible dans Internet Explorer 
qui ne supporte pas ce type MIME. 

Content-Type: application/xhtml +xml ; charset=UTF-8 

Ce qui peut etre fait tres simplement en PHP, par exemple : 
<?php 

header('Content-Type: appl i cation/xhtml +xml ; charset=UTF-8 ' ) ; 

?> 
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Le prologue XML est facultatif tant que l'encodage des caracteres se fait en UTF-8 : 
<?xml version="1.0" encodi ng="UTF-8"?> 

Meme dans ce cas-la, il est fortement recommande de toujours preciser l'en-tete HTTP 
Content-Type, ou dans le pire des cas de declarer l'encodage avec l'element meta : 

<meta charset="UTF-8" /> 

La declaration du Doctype quant a elle, qui est usuellement <!doctype html> en 
HTML 5 classique, doit imperativement posseder son premier terme en majuscules 
pour respecter la syntaxe XML : 

<! DOCTYPE htm"l> 

II est egalement necessaire de preciser un espace de noms XML pour l'element 
racine du document (la balise <htm"l>) grace a I'attribut xmlns. 

<h tml xml ns="http : //www . w3 . org/1999/xhtml "> 

De plus, vous ne serez pas autorise a utiliser la balise <nosc ri pt> dans le corps de la page. 
En resume, un document minimal de type XHTML 5 pourrait s'ecrire ainsi : 

Modele de document XHTML 5 

<! DOCTYPE htm"l> 

<html xml ns="http ://www. w3 . org/1999/xhtml "> 
<head> 

<meta charset="utf-8" /> 

<title>Document XHTML5</ti tl e> 
</head> 
<body> 

<!-- La suite des balises... --> 
</body> 
</html> 



RESSOURCE HTML VS xhtml 

Pour un comparatif beaucoup plus detaille des differences entre ces deux approches, consultez le wiki 
officiel WhatWG (en anglais) : 
► http://wiki.whatwg.org/wiki/HTML_vs._XHTML 
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Les bons outils 

Pour editer 

Choisir un bon editeur de texte est essentiel pour se sentir a l'aise dans le developpe- 
ment web. De par leur principe, les standards du Web (HTML, CSS, JavaScript, 
XML) qui ne sont en realite que des fichiers texte, peuvent etre edites avec un simple 
programme tel que le Bloc-notes (Windows), Vim/Emacs (Linux) ou TextEdit 
(Mac OS X). C'est la un grand avantage qui vous rend libre de choisir votre environ- 
nement de developpement de A a Z. Les plus aguerris choisiront probablement un 
editeur sobre dote de nombreux raccourcis, tandis que les debutants prefereront une 
interface conviviale possedant une aide a la conception. 

Vous avez toujours la possibility d'utiliser un programme plus evolue proposant un 
apercu Wysiwyg (What You See Is What You Get) au fur et a mesure de la redaction du 
document HTML, mais n'oubliez pas que pour avoir un controle exact du code, il 
vous faudra pratiquement toujours mettre les mains dans le cambouis. D'autant plus 
que les editeurs web prenant en compte toutes les specificites de HTML 5 se comp- 
tent encore sur les doigts de la main. 

En ce qui concerne l'un des outils les plus celebres, Dreamweaver, un pack de crea- 
tion HTML 5 a ete mis a disposition par Adobe pour adjoindre des modeles et con- 
seils de code a la vue editeur. 

Pensez aux criteres de choix suivants : 

• coloration syntaxique, 

• suggestions de code, 

• outils de recherche/remplacement, 

• edition multifichier (onglets), 

• presence de raccourcis clavier efficaces. 

De nos jours, une plethore d'outils est disponible sur Internet en telechargement gra- 
tuit ou payant. Chacun d'entre eux dispose de nombreuses qualites, mais aussi de 
defauts, il vous appartient de faire votre choix en regard de votre systeme d'exploita- 
tion, de vos habitudes et connaissances. 

II est possible d'adjoindre a la plupart des editeurs texte dignes de ce nom une exten- 
sion nommee Zen Coding, permettant d'ecrire plus rapidement du code HTML a 
partir d'une chaine de syntaxe CSS et d'un raccourci clavier. 

RESSOURCE ZenCoding 

Telecharger sur le site officiel 
► http://code.google.eom/p/zen-coding/ 
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RESSOURCE Editeurs web (HTML/CSS) 

Notepad++ (Windows, gratuit, licence GPL) 

► http://notepad-plus-plus.org/ 
PsPad (Windows, gratuit, freeware) 

► http://www.pspad.com/fr/ 

Eclipse (Multiplateforme, gratuit, licence EPL) 

► http://www.eclipse.org/ 

jEdit (Multiplateforme, gratuit, licence GNU GPL) 

► http://www.jedit.org/ 

Notepad2 (Windows, gratuit, licence BSD) 

► http://www.flos-freeware.ch/notepad2.html 
Bluefish (gratuit, licence GPL) 

► http://bluefish.openoffice.nl/ 

Aptana Studio (Multiplateforme, gratuit, licence mixte GPL) 

► http://www.aptana.com/ 

gedit (Linux/Gnome et multiplateforme, licence GNU GPL) 

► http://projects.gnome.org/gedit/ 

Kate (Linux/KDE et BSD, licence GNU GPL) 

► http://kate-editor.org/ 

Komodo Edit (Multiplateforme, gratuit, freeware) 

► http://www.activestate.com/komodo-edit 
TextEdit (Mac OS X, licence proprietaire) 

► http://www.apple.com/fr/macosx/ 
Smultron (Mac OS X, licence BSD) 

► http://www.peterborgapps.com/smultron/ 
UltraEdit (Multiplateforme, payant) 

► http://www.ultraedit.com/ 

Adobe Dreamweaver (Windows, payant) 

► http://www.adobe.com/fr/products/dreamweaver/ 
Microsoft Expression Web (Windows, payant) 

► http://www.microsoft.com/france/expression/ 



Pour tester et deboguer 

Le choix du navigateur est certainement encore plus important que celui de l'editeur. 
Heureusement, il est un peu plus facile, car le choix est moins vaste. Bien sur, il vous 
incombera de tester vos pages sur la plupart des principaux moteurs de rendu pour vous 
assurer qu'elles ne comportent aucune erreur de conception pouvant affecter un groupe 
d'utilisateurs. Le choix d'un navigateur principal de developpement vous permettra de 
lui adjoindre tous les outils necessaires pour diagnostiquer et deboguer le code HTML. 
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II va sans dire que les navigateurs alternatifs et Open Source sont en general mieux 
fournis en extensions de developpement. C'est le cas de Firefox, Chrome et Opera. 
Tous trois disposent d'une petite collection de controles avances permettant non seu- 
lement de consulter le code source de maniere appropriee, mais aussi de le modifier 
dynamiquement, d'agir sur les proprietes CSS pour les visualiser ou les modifier, 
d'effectuer des diagnostics de qualite sur le contenu de la page et ses medias, d'exe- 
cuter du code JavaScript a la demande avec des fonctions de debogage avancees, voire 
d'examiner le trafic reseau recu et ends. Si vous ne devez disposer que d'un seul outil, 
il faut commencer par celui-ci, car le gain de temps offert est considerable. 

Virtualisez ! 

Les solutions pour proceder a des installations multiples de navigateurs sont nom- 
breuses. Certains programmes peuvent facilement disposer de plusieurs versions 
independantes sur le meme systeme d'exploitation, tandis que d'autres tels 
qu'Internet Explorer, qui est lie au processus des installations Microsoft, necessite- 
ront des astuces (notamment IETester) pour conserver d'anciennes versions sur le 
meme poste de travail. 

Lideal reste de se servir de machines virtuelles pour effectuer des tests fables. L'idee 
est de pouvoir executer dans le meme environnement de travail d'autres systemes 
d'exploitation emules par des programmes hotes : VirtualPC, VMWare, VirtualBox, 
etc. Ceux-ci executent des images disques contenant un systeme complet et permet- 
tent de se retrouver en situation quasi reelle, avec les contraintes et specificites de 
chacun d'entre eux en termes de rendu des polices, de gestion des plug-ins (Flash, 
Java, Silverlight), que ce soit pour Windows, Linux ou Mac OS X. 



VirtualPC (Microsoft) 

► http://www.microsoft.com/windows/virtual-pc/default.aspx 
VirtualBox (Oracle, Open Source) 

► http://www.virtualbox.org/ 
VMWare (Multiplateforme, payant) 

► http://www.vmware.com/fr/ 
Parallels Desktop (Mac) 

► http://www.parallels.com/fr/products/desktop/ 

Mozilla Firefox 

Navigateur alternatif par excellence, Mozilla Firefox est souvent le premier choix des 
developpeurs, car c'est celui qui comporte le plus d'extensions. 
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La plus celebre d'entre elks est Firebug. II s'agit d'un inspecteur de document tres 
complet qui regroupe sous differents onglets les outils de consultation et d'analyse du 
code HTML, JavaScript, CSS. II est possible d'agir en direct sur le contenu de la 
page et ses proprietes de style pour constater le resultat visuel. 

Au moins deux extensions peuvent se greffer aux onglets de Firebug : YSlow (par 
Yahoo) et Page Speed (par Google). Ces deux protagonistes visent a effectuer des 
audits de performance avec des recommandations d'ameliorations, suivant les criteres 
communiques par les deux geants du Web. 

Historiquement, Web Developper fut la premiere extension orientee pour les deve- 
loppeurs, tres prisee pour ses acces rapides aux outils de diagnostic regroupes par themati- 
ques (cookies, images, formulaires, structure du document, mise en valeur de certains types 
d'elements, redimensionnement de la fenetre du navigateur, validation en ligne, etc.). 



Ressource Extensions pour Mozilla Firefox 

Mozilla Firefox - le navigateur 

► http://www.getfirefox.com/ 
Firebug 

► http://getfirebug.com/ 
Yslow (Yahoo) 

► http://developer.yahoo.com/yslow/ 
Page Speed (Google) 

► http://code.google.com/intl/fr/speed/page-speed/download.html 
Web Developper 

► https://addons.mozilla.org/fr/firefox/addon/60/ 



Google Chrome 

Dernier venu dans la cour des grands navigateurs, deja leader dans la course aux per- 
formances, Chrome embarque un inspecteur tres evolue, accessible via le clic droit de 
la souris puis l'option Inspecter Velement ou dans le menu general, sous-menu Outils > 
Outils de developpement (raccourci Ctrl + Maj + I sous Windows). 

On y retrouve toutes les fonctionnalites de base relatives a l'inspection du document, 
des scripts, des ressources et du stockage. Celui-ci met par ailleurs l'accent sur les 
performances, car il comporte des outils de monitoring reseau, moteur de rendu, et 
une console tres puissante. 

Firebug Lite est egalement disponible dans une version specifique a Google 
Chrome. 
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RESSOURCE Extensions pour Google Chrome 

Google Chrome - le navigateur 

► http://www.google.com/chrome7hhfr 
Firebug Lite 

► http://getfirebug.com/releases/lite/chrome/ 



Safari 

Navigateur de predilection sous Mac OS X, edite par Apple, Safari doit figurer 
parmi les agents utilisateurs essentiels lors de la verification des pages web, car il 
touche un public croissant. 

Le menu des outils de developpement devient disponible apres activation dans le 
menu des Preferences (onglet Avancees, case a cocher Afficher le menu de developpe- 
ment dans la barre de menus). Etant base sur le meme moteur que celui de Google 
Chrome, WebKit, celui-ci comporte globalement les memes types de ressources et 
peut etre atteint par les memes moyens. 

Firebug Lite (version JavaScript) est disponible pour Safari. 



RESSOURCE Extensions pour Safari 

Safari - le navigateur 

► http://www.apple.com/fr/safari/ 
Firebug Lite 

► http://getfirebug.com/firebuglite 



Opera 

Le moteur du navigateur d'Opera a une excellente reputation. Bien qu'outsider, il 
affiche d'excellentes performances et un respect des standards du Web en constante 
evolution. 

Indus dans Opera (moteur Presto), Dragonfly est un ensemble d'outils equivalent a 
Firebug. Tous les onglets d'inspection sont presents, notamment DOM, CSS, 
Scripts, Reseau, Console. Dragonfly peut etre active en cliquant avec le bouton droit 
de la souris sur l'element que vous souhaitez inspecter puis en selectionnant Inspecter 
I'element. On le retrouve dans le menu Outils de developpeur sous Windows et Linux 
ou le menu Editer sous Mac. 

Firebug Lite (version JavaScript) est disponible pour Opera. 
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Ressource Extensions pour Opera 

Opera - le navigateur 

► http://www.opera.com/ 
Firebug Lite 

► http://getfirebug.com/firebuglite 



Internet Explorer 

Les outils de developpement d'Intemet Explorer sont disponibles a partir de la version 8 
dans le menu Outils et accessibles avec la touche de raccourci F12. On y retrouve dans une 
fenetre independante ou fusionnee au navigateur les outils les plus courants pour la visua- 
lisation HTML, CSS, JScript (JavaScript), l'audit de code et quelques complements. 

Firebug Lite (version JavaScript) est disponible pour Internet Explorer a partir de sa 
version 6. C'est un bon complement, surtout pour les anciennes versions qui ne disposent 
a l'origine d'aucun outil d'inspection et de diagnostic. 



Ressource Extensions pour Internet Explorer 

Internet Explorer - le navigateur 

► http://www.microsoft.com/france/windows/intemet-explorer/ 
Firebug Lite 

► http://getfirebug.com/firebuglite 



Consoles JavaScript pour les API HTML 5 

Les consoles JavaScript sont des panneaux bien utiles presents dans les extensions pour 
developpeurs. Elles permettent la saisie de code rapide a des fins de test, et le diagnostic des 
appels effectues, par un affichage tres agreable et structure des variables JavaScript (objets, 
tableaux, etc.). Dans la plupart des cas, elles sont equipees de leurs propres methodes autori- 
sant un acces direct a la sortie depuis des scripts developpes et inclus dans les pages HTML. 
Les fonctions consol e . 1 og () , consol e . di r () sont tres courantes et remplacent avanta- 
geusement toutes les autres fonctions telles qu'al e rt () qui doit etre oubliee. 



Tableau 2-2 Acces aux consoles dans les principaux navigateurs 



Navigateur 


Menu 


Raccourci 


Precisions 


Mozilla Firefox 


Developpement web > 


Ctrl + Maj + J 






Console d'erreurs 






Mozilla Firefox avec 


Developpement web > 


F12 


Onglet Console 


FNSirebug 


Firebug 
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Tableau 2-2 Acces aux consoles dans les principaux navigateurs (suite) 



Navigateur 


Menu 


Raccourci 


Precisions 


Google Chrome 


Outils > Console JavaScript 


Ctrl + Maj + J 


Onglet Console 


Internet Explorer 


Outils > Outils de 
developpement 


F12 


Onglet Console 


Safari 


Menu > Developpement > 
Afficher la console d'erreurs 


Ctrl + Option + C 


Onglet Console 


Opera 


Dragonfly 


Ctrl + Maj + I 


Onglet Console d'erreurs 



La console doit etre votre meilleure amie si vous decidez de vous attaquer aux API 
HTML 5, JavaScript et DOM. Elle est essentielle pour comprendre ce qui se 
deroule, et pour resoudre les erreurs pouvant survenir tant dans la syntaxe du code 
que dans les differences de support des navigateurs. 



Consultez le chapitre 20 pour une introduction a JavaScript et au DOM. 



La validation 

Tous les documents HTML 5 ou XHTML 5 peuvent etre valides grace a un analy- 
seur syntaxique en ligne. II est tres fortement recommande de proceder a une verifi- 
cation systematique pour garantir un code de qualite, interprete au mieux sur les dif- 
ferents navigateurs. C'est un moyen ideal de se premunir d'erreurs de syntaxe, 
d'imbrication de balises ou encore d'oubli de balises fermantes. 



Ressource Validateurs HTML 

Validateur officiel du W3C 

► http://validator.w3.org/ 
Validateur CSS du W3C 

► http://jigsaw.w3.org/css-validator/ 
Validateur HTML 5 experimental 

v http://HTML5.validator.nu/ 



Vous aurez la possibilite de valider une page en indiquant son adresse (URL), par 
envoi du fichier complet (File Upload) ou par copier-coller du code (Direct Input). 
Les messages d'erreurs sont en anglais, mais relativement explicites avec la mention 
de la portion de code incriminee. 
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Markup Validation Service 

Check the markup (HTML, XHTML, ...) of Web documents 



Figure 2-4 

Le validateur HTML 
officiel du W3C 

Validate by URI Validate by File Upload Validate by Direct Input 
Validate by URI 

Validate a document online: 
Address: 





Character 
Encoding 



(detect automatically) ^ O Only if missing 



Document Type HTML5 (experimental) - □ Only if missing 

List Messages Sequentially O Group Error Messages by Type 

□ Show Source □ Clean up Markup with HTML Tidy 

□ Show Outline □ Validate error pages output" 086 



Check ) 



Rappels sur les styles CSS 

L'apparence d'un document HTML est definie dans la (ou les) feuille(s) de style qui 
lui est (sont) associee(s). Le langage CSS (Cascading Style Sheets) ou feuilles de style 
en cascade porte bien son nom, car il definit un ensemble de regies de mise en forme 
appliquees de facon combinee selon un degre de priorite (styles intrinseques au navi- 
gateur, styles utilisateur, styles selon le media de consultation). 

Ce principe de separation entre la forme (CSS) et le contenu (HTML) permet une 
plus grande souplesse dans la maintenance des styles globaux pour un site, de partir 
sur de bonnes bases pour l'accessibilite numerique des pages web et de concevoir le 
document en pretant attention a la semantique des elements. 

Les regies sont reunies : 

• soit dans un fichier externe, auquel on fait reference au travers de la balise <1 i nk> ; 

• soit dans l'element <styl e>, membre de la section <head>. 
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Elles possedent une structure relativement claire : un selecteur pour designer l'element 
HTML sur lequel appliquer une serie de proprietes, regroupees entre accolades. Les 
proprietes agissent, et possedent des valeurs specifiques (des mots-cles), numeriques 
(pixels, pourcentages, etc.) ou encore des couleurs (codes hexadecimaux, RVBA, etc.). 

Ainsi les exemples suivants definissent une couleur de fond « chocolat » pour le corps 
de la page (element body) et trois proprietes pour les paragraphes (elements p) : une 
taille de texte de 32 pixels, un alignement centre et une couleur de police blanche 
(code hexadecimal #fff). Celles-ci seront appliquees en priorite et en complement 
des styles par defaut definis par le navigateur pour ces elements. 

Appel a une feuille de style externe (styles.css) 

<!doctype html> 

<htm"l> 

<head> 

<title>Ma page de test</title> 

<link rel="stylesheet" media="screen" href="styles.css" type="text/css"> 

</head> 
<body> 

<p>Mon paragraphe</p> 

</body> 

</html> 

Contenu du fichier styles.css 
body { 

background-col or : chocol ate ; 
} 

P { 

font-size: 32px; 
text-al ign : cente r ; 
color:#fff; 
} 

L'emploi d'une feuille de style externe presente l'avantage de la mise en cache par le 
navigateur et une plus grande facilite de maintenance (un seul fichier a modifier si 
celui-ci est inclus sur toutes les pages). 

Declaration de styles directement dans le document 

<!doctype html> 
<head> 

<title>Ma page de test</ti tl e> 
<style type="text/css"> 
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body { 

background -col or : chocol ate ; 
} 

P { 

font-size : 32px ; 
text-al i gn : center ; 
color :#fff; 

} 

</styl e> 

</head> 
<body> 

<p>Mon paragraphe</p> 

</body> 

</htm"l> 

Cet exemple reste minimaliste, et s'applique a l'aide de deux selecteurs tres simples (p 
et body) aux elements eponymes du code source HTML. L'ecriture de selecteurs plus 
evolues permet de cibler plus finement les elements concernes dans la page. En voici 
quelques exemples : 



Tableau 2-3 Exemples de selecteurs CSS de base 



Selecteur 


Elements concernes 


Exemples 


P 


Tous les elements p. 


<p> . . . 


p span 


Tous les elements span situes 
dans des elements p. 


<pxspan>. . . 


p, span 


Tous les elements p et span. 


<px/p> 
<spanx/span> 


div p span 


Tous les elements span situes dans 
des elements p, eux-memes situes 
dans des elements div. 


<divxpxspan>. . . 


. i ntroducti on 


Tous les elements de classe 
"introduction". 


<p cl ass="i ntroducti on"> .. . 
<span cl ass="i ntroducti on"> .. . 


p. introduction 


Tous les elements p de classe 
"introduction". 


<p class="introduction">. . . 


#titre 


L'element portant I'id "titre". 


<div id="titre"> 
<hl id="titre"> 


p#titre 


L'element p portant I'id "titre". 


<p id="titre"> 


div#titre 

p. introduction 


Tous les elements p de classe 
"introduction" situes dans l'element 
di v portant I'id "titre". 


<div id="titre"> 
<p cl ass="i ntroducti on"> . . .</p> 
<p cl ass="i ntroducti on"> . . .</p> 
</di v> 


a: hover 


Tous les liens survoles. 


<a>Lire cet article</a> 
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Tableau 2-3 Exemples de selecteurs CSS de base (suite) 



Selecteur 


Elements concernes 


Exemples 


i nput [type=submi t] 


Tous les elements i nput d'attribut 


<input type="submit"> 




type "submit". 




hl+h2 


Tous les elements h2 suivant 


<hl>Titre pri nci pal </hl> 




directement des elements hi. 


<h2>Sous-ti tre</h2> 



Note : La combinaison de plusieurs feuilles de style distinctes au sein d'un meme 
document peut modifier la prise en compte des priorites de ces regies. 



Reportez-vous a I'annexe B en ligne consacree a la syntaxe des selecteurs, et retrouvez le tableau recapi- 
tulatif des principales proprietes CSS applicables. 



LlVRES Ressources pour apprendre CSS 

Goetter Raphael, CSS avancees, Eyrolles 201 1 
B3 Goetter Raphael, mementos CSS 2 et CSS 3, Eyrolles 201 1 
Goetter Raphael, CSS 2. Pratique du design web, Eyrolles 2009 
Cederholm Dan, CSS 3 pour les web designers, Eyrolles 201 1 
... Sarrion Eric, XHTML et CSS pour le Web mobile, Eyrolles 2010 
£11 Nebra Mathieu, Reussirson site web avec XHTML et CSS, Eyrolles 2010 
Q Draillard Francis, Premiers pas en CSS et HTML, Eyrolles 201 



Rappels sur JavaScript 

JavaScript est un langage developpe par Netscape en 1995, et ajoute a Netscape 
Navigator, puis aux autres families de navigateurs. Ce langage interprete par le pro- 
gramme client (le navigateur lui-meme) doit permettre d'ajouter de l'interaction avec 
l'utilisateur au lieu d'un simple chargement de page statique. 

II doit permettre aussi au travers du DOM (Document Object Model) de manipuler les 
elements HTML presents sur la page : les creer dynamiquement, les modifier, les 
supprimer, agir sur leurs proprietes CSS, etc. C'est aussi JavaScript qui est mis en 
ceuvre au sein de la « technologie » Ajax (Asynchronous JavaScript and XML) pour 
effectuer des chargements de contenu dynamiques en relation avec le serveur, ou 
encore avec JSON (JavaScript Object Notation) en tant que format de donnees. 

JavaScript est aussi connu sous le nom ECMAScript dans le cadre de la specification 
ECMA-262. 
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Specification JavaScript en tant que standard ECMAScript 

La liste des standards ECMA 

► http://www.ecma-international.org/publications/standards/Stnindex.htm 
Ressources ECMAScript sur Mozilla.org 

► https://developer.mozilla.org/en/JavaScript_Language_Resources 
Presentation de JSON 

► http://www.json.org/jsonfr.html 



Frameworks JavaScript 

Un « framework » JavaScript est un ensemble de fonctions (ecrites elles-memes en 
JavaScript), regroupees dans un fichier exteme a inclure dans une page HTML grace a 
la balise <script>. Un framework definit un environnement permettant d'etendre les 
possibilites deja offertes par la base du langage. 

jQuery est un framework populaire et facile a aborder. Sa syntaxe particulierement ele- 
gante et simple a aborder peut se reveler efficace en quelques lignes de code. II comprend 
des fonctions de modification dynamique du DOM, des styles CSS, des effets d'anima- 
tion, et des fonctions pour l'ecriture de gestionnaires d'evenements ou d'appels Ajax. 

D'autres frameworks cohabitent en fournissant plus ou moins de fonctionnalites avec 
des poids de fichiers variables et des syntaxes specifiques. 



Ressource Frameworks JavaScript 

Les principaux frameworks JavaScript sont jQuery (licence GPL/MIT), MooTools (licence MIT), Dojo Toolkit 
(licence BSD), Prototype (licence MIT) et Scriptaculous (licence MIT). 

► http://www.jquery.com 

► http://www.mootools.net/ 

► http://www.dojotoolkit.org/ 

► http://www.prototypejs.org/api 

► http://wiki.github.com/madrobby/scriptaculous/ 
Sarrion Eric, jQuery et jQuery Ul, Eyrolles 201 1 



Ou placer <script> ? 

JavaScript est charge dans la page via la balise <scri pt>. Celle-ci autorise l'inclusion 
de code directement dans le corps de la page ou par l'intermediaire d'un fichier 
externe lorsque l'attribut src est utilise - ce qui est preferable en termes de mainte- 
nance et de mise en cache par le navigateur - voir l'exemple ci-apres. 
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On recommande de placer les appels JavaScript ou le chargement des frameworks en 
fin de document, avant la balise </body> pour ne pas bloquer le chargement de la 
page. Attention neanmoins a ne pas modifier une page existante sans discernement : 
certains scripts necessitent d'etre places en amont ou precisement dans le contenu de 
la page, d'autres peuvent agir sur le contenu des que le document est charge. Cela 
dependra de leur conception intrinseque. 

Appel a un JavaScript externe en fin de document 

<!doctype html> 

<html> 

<head> 

<title>Ma page de test</title> 

<1ink reWstylesheet" media="screen" href="styl es . ess" type="text/css"> 

</head> 

<body> 

<p>Mon paragraphe</p> 

<scri pt src="monf i chi er . j s"x/script> 

</body> 
</html> 

D'autres techniques plus evoluees permettent de declarer les appels a JavaScript de 
facon non bloquante dans la balise <head>, on nomme cette technique lazy loading ou 
chargement asynchrone. 

LlVRES 

IB Sarrion Eric, Prototype et Scriptaculous - Dynamiser ses sites web avec JavaScript, Eyrolles 2010 

03 Sarrion Eric, JQuery etJQuery ill, Eyrolles 201 1 

CQ Defrance Jean-Marie, Ajax, jQuery et PHP, Eyrolles 201 1 

£Q Porteneuve Christophe, Bien developper pour le Web 2.0, Eyrolles 2008 



Publier un site en ligne 



Choisir un hebergeur web 

Une fois les pages finalisees, il faudra leur trouver un foyer accueillant, un hebergement 
pour etre visibles de tous sur Internet, e'est-a-dire un serveur web : une machine con- 
nected en permanence a Internet. La plupart du temps, un nom de domaine sera associe 
a ce serveur pour permettre aux visiteurs de le saisir dans la barre d'adresses du naviga- 
teur, et egalement aux moteurs de recherche de referencer au mieux le site. 
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Une plethore d'offres existe sur Internet, avec des tarifs toujours plus competitifs. On 
distingue plusieurs types de services : 

• Dedie : une machine complete est mise a votre disposition, vous pouvez l'admi- 
nistrer a distance via un panel web (un site) ou via une console (connexion en 
SSH) - convient aux sites a fort trafic ou avec des besoins tres particuliers. 

• Mutualise : une partie des performances d'une machine est mise a votre disposi- 
tion en partage avec d'autres utilisateurs - convient aux sites a faible trafic. 

• Virtualise : une machine « virtuelle » dependant d'un ensemble de serveurs plus 
puissants est mise en place, avec possibilite d'evolutions ulterieures. 

Dans le cas d'un hebergement mutualise, le choix se fera en fonction de l'espace dis- 
ponible, de la presence d'une base de donnees et d'un langage de programmation, du 
trafic mensuel autorise, de la disponibilite d'adresses e-mail, de la qualite du support 
technique, de la rapidite d'intervention en cas de panne. 

Avec un serveur dedie, vous serez totalement libre d'installer tout ce que vous desirez 
sur la machine, mais aussi totalement libre de rater la configuration et la resolution 
des pannes. Cela demande de fortes competences en administration systeme, la plu- 
part du temps sous Linux. 

Utiliser un client FTP 

Le transfert des fichiers (pages HTML, images, JavaScript, CSS) sur l'hebergement 
fait appel en general au protocole FTP (File Transfer Protocol). L'hebergeur commu- 
nique les informations de connexion au serveur web. Une vue vous permet de glisser- 
deposer les fichiers depuis le disque dur local vers celui de l'hebergement. Lun des 
clients FTP les plus celebres est FileZilla. 

Ressource Clients FTP : FileZilla, FireFTP 

► http://filezilla-project.org/ 

► http://fireftp.mozdev.org/ 



Choisir un langage serveur et un systeme de gestion de contenu 

La maintenance d'un grand nombre de pages HTML peut vite etre fastidieuse, sur- 
tout lorsque le code est redondant. II est tres frequent de faire appel a un langage de 
programmation interprete sur le serveur web. Celui-ci sera en charge de la genera- 
tion du code source a partir d'un ou plusieurs fichiers, eventuellement d'une base de 
donnees, avant l'envoi au navigateur. 
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II sera possible ainsi de profiter de fonctionnalites avancees, de facon transparente 
pour le navigateur qui ne recevra au final que le code HTML a interpreter, et d'en 
profiter pour : 

• inclure un fichier dans un autre (par exemple un en-tete et un pied de page com- 
muns sur toutes les pages du site) ; 

• mutualiser la generation de code HTML dans des fonctions exploitant des struc- 
tures de controle classiques pour un langage de programmation : boucles (for, 
while, switch), tests (if, else), classes etobjets ; 

• stacker le contenu des pages dans des fichiers ou dans une base de donnees edita- 
ble en ligne via une interface specifique sans modification du code source par le 
FTP (par exemple liste des produits en vente sur un site e-commerce, articles 
d'un site d'actualite ou d'un blog) ; 

• profiter de la gestion des dates, de la lecture du XML, de la negotiation de contenu. 

Parmi les langages les plus celebres pour ce type d'operations, figurent PHP, Ruby 
(on Rails), ASP.NET, Python, Java. Leur choix va de concert avec celui de l'heber- 
geur et du systeme d'exploitation hebergeant le serveur web. 



Ressource Langages de script interpretes cote serveur 

PHP (Open Source) 

► http://www.php.net/ 

Ruby (Open Source) et Ruby on Rails 

► http://www.ruby-lang.org/fr/ 

► http://rubyonrails.org/ 
Python (Open Source) 

► http://www.python.org/ 
JavaServer Pages 

► http://java.sun.com/products/jsp/ 
ASP.NET (Microsoft) 

► http://www.asp.net/ 



On delegue par ailleurs souvent la programmation a un systeme de gestion de contenu 
(SGC) aussi nomme CMS (Content Management System). Celui-ci pourra se servir de 
modeles de document (themes, templates) pour structurer le contenu injecte par l'utilisa- 
teur. Le choix d'un CMS releve directement de l'usage qui en sera fait. En effet, certains 
sont orientes vers les sites institutionnels et d'autres vers les blogs de taille modeste. 

Enfin, on distingue aussi les frameworks de developpement, qui comprennent des 
briques de base pour debuter un projet, mais qu'il faudra etendre pour construire son 
propre CMS. La plupart font appel au principe MVC (Modele Vue Controleur). 
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Ressource Systemes de gestion de contenu en PHP : WordPress, Drupal, DotClear, Typo3, 
Joomla! et SPIP 

► http://www.wordpress.org/ 

► http://drupal.org/ 

► http://typo3.org/ 

► http://fr.dotclear.org/ 

► http://fr.wikipedia.org/wiki/Joomla! 

► http://www.spip.net/ 



Ressource Frameworks web PHP : Symphony, Codelgniter, CakePHP 

► http://codeigniter.com/ 

► http://cakephp.org/ 

► http://www.symfony-project.org/ 



Le protocole HTTP 

HTTP (HyperText Transfer Protocol) est un protocole de communication concu pour 
formuler des demandes a un serveur web et transferer (recevoir) le contenu des pages 
web. II fonctionne usuellement grace a TCP/IP, un protocole reseau de plus bas 
niveau. D'autres protocoles repandus sur Internet sont SMTP et POP3/IMAP pour 
l'envoi et la reception des e-mails, FTP pour le transfert de fichiers, DNS pour la 
resolution des noms de domaines en adresses IP, etc. 

Nous sommes tous habitues en tant qu'internautes a lire le fameux prefixe http:// dans 
la barre d'adresses du navigateur, mais il est plus rare de s'interesser a son fonctionne- 
ment. De nos jours, les questions de performance et d'optimisation a l'extreme le 
placent sur le devant de la scene. 

HTTP se base essentiellement sur un dialogue texte, car a l'origine les pages web 
sont surtout constituees de code HTML. II a ete imagine par Tim Berners-Lee 
en 1991, s'est vu numerate en version 0.9 juste apres la finalisation de HTTP 1.0, 
puis a evolue jusqu'a HTTP 1.1. 



RFC HTTP 1.1 

La premiere definition du protocole HTTP en 1991 

► http://www.w3.org/Protocols/HTTP/Aslmplemented.html 
RFC HTTP 1.1 sur le site de I'lETF 

► http://www.ietf.org/rfc/rfc261 6.txt 
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Requetes et en-tetes 

La plupart du temps, les pages web sont demandees au serveur grace aux commandes 
GET et POST. II en existe bien d'autres, mais elles sont utilisees plus rarement ou pour 
des developpements specifiques (OPTIONS, CONNECT, HEAD, TRACE, PUT, DELETE). 

Chaque requete HTTP debute par une ligne contenant une commande, suivie de 
l'emplacement de la ressource que le navigateur souhaite obtenir, terminee par 
HTTP, un slash et un numero de version. 

Cette ligne peut etre suivie par une plethore d'options facultatives, ajoutees par le 
navigateur, occupant chacune une ligne. Elles ne sont pas toutes normalisees et 
obeissent a la syntaxe champ: valeur. On les nomme en-tetes HTTP, car elles defi- 
nissent les modalites d'echange - qui sont masquees a l'utilisateur - des donnees qui 
les suivent, tant en envoi qu'en reception. 

Ces meta-informations vehiculees par les en-tetes HTTP peuvent concerner : 

• le type MIME du document servi, 

• les types acceptes par l'agent utilisateur, 

• les parametres de cache, 

• la chaine d'identification du navigateur, 

• l'adresse du referant (referer en anglais), 

• et bien d'autres combinaisons. 

Le tout est clos par une simple ligne vide et suivi par les donnees envoyees au serveur 
dans le cas d'une requete formulee par le navigateur. 

Un exemple de requete HTTP 

GET / HTTP/1.1 

Host: www.w3.org 

User-Agent: Mozilla/5.0 (Windows NT 6.1; W0W64; rv:2.0b7) Gecko/20100101 
Fi refox/4.0b7 

Accept: text/html ,application/xhtml+xml , appl i cati on/xml ;q=0.9, */*;q=0.8 

Accept- Language : f r , f r-f r ; q=0 . 8 , en -us ; q=0 . 5 , en ; q=0. 3 

Accept-Encodi ng : gzip, deflate 

Accept-Charset : IS0-8859-1 , utf -8 ; q=0 . 7 , * ;q=0. 7 

Keep-Alive: 115 

Connection: keep-alive 

If-Modified-Since: Tue, 22 Feb 2011 06:07:11 GMT 
If-None-Match: "7bl9-49cd8ca7e81c0 ; 89-3f 26bdl7a2f00" 
Cache-Control : max-age=0 

Le serveur repond de maniere similaire avec en introduction le protocole, sa version 
et un code de retour (200 si tout s'est bien passe, et le fameux 404 si rien n'a ete 
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trouve a l'adresse demandee). D'autres en-tetes peuvent suivre, ainsi les donnees 
utiles delivrees par le serveur qui peuvent etre de type texte (HTML, CSS, JavaS- 
cript, etc.) ou de type binaire (images, videos, sons, etc.). 

Un exemple de reponse HTTP 
HTTP/1.1 200 OK 

Date: Tue, 22 Feb 2011 22:07:52 GMT 

Server: Apache/2 

Content-Location: Home.html 

Vary : negoti ate , accept , Accept-Encodi ng 

TCN: choice 

Last-Modified: Tue, 22 Feb 2011 06:07:11 GMT 

Etag: "7b5b-49cd8ca7e81c0 ; 89-3f 26bdl7a2f00" 

Accept-Ranges : bytes 

Cache-Control : max-age=600 

Expires: Tue, 22 Feb 2011 22:17:52 GMT 

Content-Encoding: gzip 

P3P : pol i cyref ="http : //www. w3 . org/2001/05/P3P/p3p . xml " 
Content-Length: 8616 
Connection: close 

Content-Type: text/html; charset=utf-8 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : //www.w3 .org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 

<html xml ns="http ://www. w3 . org/1999/xhtml " xml : 1 ang="en" lang="en"> 

...et ainsi de suite... 



Tableau 2-4 Quelques en-tetes HTTP detailles 



En-tete 


Usage 


Version 


Date 


Date et heure de formulation de la requete. 


1.0 


Host 


Domaine interroge (permet d'heberger plusieurs noms de domaine sur le 
meme serveur avec la meme adresse IP). 


1.0 


Server 


Nom du serveur repondant. 


1.0 


User-Agent 


ChaTne de texte identifiant I'agent utilisateur (generalement nom du moteur 
de rendu du navigateur suivi du numero de version et du systeme 
d'exploitation). 


1.0 


Content-Length 


Longueur des donnees envoyees ou recues dans la partie utile suivant 
les en-tetes (en octets). 


1.0 


Content-Type 


Type MIME de la ressource envoyee par le serveur. 


1.0 


Expi res 


Date d'expiration de la ressource. 


1.0 


Last-Modi fi ed 


Date de derniere modification de la ressource. 


1.0 


Accept 


Types MIME acceptes. 


1.1 
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Tableau 2-4 Quelques en-tetes HTTP detailles (suite) 


En-tete 


Usage 


Version 


Accept-Charset 


Encodages de caracteres acceptes. 


1.1 


Accept-Language 


Langages de contenu acceptes. 


1.1 


Cache-Control 


Directives de controle sur le cache. 


1.1 



Les codes de retour font partie de cinq families se distinguant sur le chiffre des 
centaines : 

• lxx : Information 

• 2xx : Succes 

• 3xx : Redirection 

• 4xx : Erreur du client HTTP 

• 5xx : Erreur du serveur 



Tableau 2-5 Quelques codes HTTP detailles 



Code 


Signification 


Explication 


200 


OK 


Succes. 


301 


Moved Permanently 


Ressource deplacee de facon permanente a une autre adresse. 


302 


Found 


Ressource deplacee de facon temporaire a une autre adresse. 


304 


Not modified 


Ressource non modifiee depuis la derniere requete. 


401 


Unauthorized 


Identification necessaire pour acceder a la ressource. 


403 


Forbidden 


Identification refusee. 


404 


Not found 


Ressource non trouvee. 


410 


Gone 


Ressource absente, sans adresse de redirection connue. 


500 


Internal Server Error 


Erreur interne au serveur. 


503 


Service Unavailable 


Serveur temporairement indisponible. 



Les messages et requetes HTTP transitant par le navigateur peuvent etre analyses rela- 
tivement facilement grace aux extensions, par exemple dans l'onglet Reseau de Firebug 
(pour Firefox) et Network des Outils de developpement (pour Google Chrome). 

Quant a HTTPS, une declinaison fonctionnant avec les protocoles de chiffrement 
SSL et TLS, on la retrouve surtout dans la conception d'espaces utilisateurs avec 
identification securisee, et pour les procedures necessitant de la confidentialite telles 
que les paiements sur les sites d'e-commerce. 
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Bonnes pratiques 

Afin de vous y retrouver dans un projet web, et surtout - si vous oeuvrez a plusieurs - 
de permettre a votre equipe de s'y retrouver, il est necessaire d'adopter une methode 
de conception vous evitant des embuches frequentes dans ce type de travail. 

Organisation du code 

Ces automatismes peuvent necessiter une petite periode d'adaptation pour leur mise 
en place, mais ils vous feront gagner du temps a moyen et long terme : 

• Indentez correctement votre code HTML et CSS. 

• Commentez largement votre code pour permettre sa relecture et sa comprehension. 

• Nommez vos identifiants et classes d'une maniere logique et intelligible. 

Organisation des fichiers 

Un projet web a tendance a s'etoffer sur le long terme et a vite devenir une jungle de 
multiples fichiers dont certains sont parfois abandonnes sans que Ton sache dans quel 
but ils sont encore employes, tandis que d'autres sont mal entretenus. 

• Prevoyez des repertoires pour chaque type de ressource (code CSS, librairies 
JavaScript, fichiers proposes en telechargement, etc.). 

• Stockez les fichiers medias a part, eventuellement classes par mois et annee. 

• Numerotez les versions des fichiers source qui sont souvent modifies. 

• Dotez-vous d'un gestionnaire de versions tel que Subversion (SVN) ou Git. 

• Conservez toujours des copies de sauvegarde. 

Optimisations en vue des performances 

Diverses ameliorations peuvent etre apportees au code source d'une page HTML pour 
ameliorer son temps d'interpretation et de rendu graphique par le moteur du navigateur. 

Le protocole HTTP permet quant a lui un controle plus fin de la gestion du cache des 
fichiers par le navigateur pour eviter un nouveau telechargement si ceux-ci hont pas ete 
modifies, et de leur compression pour reduire le temps de transfert sur le reseau. 

Pour les plus aguerris aux techniques de configuration serveur, les gains seront appre- 
ciables si vous : 

• Definissez une date d'expiration pour vos fichiers heberges grace aux en-tetes 
Expi res et Last-Modi f i ed, examinez aussi Cache-control . 
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• Reduisez la taille du code source HTML, JavaScript et CSS (au detriment de la lisibi- 
lite) par des procedures de minification, combinez les fichiers JavaScript et CSS. 

• Compressez les fichiers texte et le code source grace a mod_gzip ou mod_def 1 ate 
sous Apache. 

• Evitez l'appel aux feuilles de style avec la regie ©import, utilisez des selecteurs 
CSS performants, specifiez les dimensions des images, exploitez les Sprites CSS 
pour combiner les images de fond en une seule. 

• Placez le code JavaScript en bas de page, reduisez les cookies au minimum. 

• Compressez vos images en choisissant le format le plus approprie parmi ceux 
acceptes sur le web (JPEG, PNG, GIF, etc.). 

• Reduisez le nombre de requetes HTTP necessaires en minimisant le nombre de 
fichiers invoques pour afficher une page. 

• Evitez les erreurs 404 et les redirections. 

Suivez pour cela les recommandations publiees par Google et Yahoo, installez en 
complement les extensions YSlow et Google Page Speed : 



Ressource Listes de bonnes pratiques pour la performance web 

Exceptional Performance -Yahoo Developer Network 

► http://developer.yahoo.com/performance/ 
Web Performance Best Practices 

► http://code.google.com/intl/fr/speed/page-speed/docs/rules_intro.html 
YUI Compressor (minification de code JavaScript et CSS) 

► http://developer.yahoo.com/yui/compressor/ 
Yslow (Yahoo) 

► http://developer.yahoo.com/yslow/ 
Page Speed (Google) 

► http://code.google.com/intl/fr/speed/page-speed/download.html 



Navigateurs et support 



Par-dela les erreurs 404 et les cookies, le navigateur est le meilleur compagnon du 
surfeur. Mais les navigateurs web sont tres inegaux quant au support HTML ; 
concernant les moteurs caches sous leur capot, ils sont en pleine evolution. 




Figure 3-1 Un remede necessaire ? 
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Tous les integrateurs web le confirmeront : l'heterogeneite des navigateurs n'oeuvre 
pas toujours en faveur de la tranquillite d'esprit. Cet euphemisme n'a jamais ete aussi 
justifie, car un nombre croissant de declinaisons voient le jour sur de nouveaux peri- 
pheriques (smartphones, tablettes, consoles de jeu), avec de nouveaux systemes 
d'exploitation (Android, iOS, etc.), et de nouvelles contraintes. 

Tester un site sur toutes les plates-formes necessite du temps. Pourtant, ce travail de 
longue haleine tend a s'ameliorer et se simplifier puisque les internautes adoptent de 
plus en plus les navigateurs recents, voire ceux qui se mettent automatiquement a jour, 
et abandonnent ceux dont le moteur est depasse (si a ce moment precis vous pensez a 
Internet Explorer 6 et a l'allegorie de la caverne de Platon, vous avez gagne). 

Voyons le bon cote des choses : nous vivons heureusement dans un monde mer- 
veilleux ou il est possible de choisir - la plupart du temps - le navigateur le plus per- 
formant ou le plus respectueux des standards. Cette concurrence favorise l'innova- 
tion, l'implementation des nouveautes proposees par les differents editeurs, la 
correction des failles de securite. De meme, les possibilites creatives sont decuplees, 
car de nouveaux usages naissent avec de nouvelles API. 

La venue de HTML 5 jette un nouveau pave dans la mare de la « guerre des 
navigateurs ». Etant donne qu'il ne s'agit pas d'un ensemble indivisible de fonction- 
nalites et que son implementation est progressive, on pourra effectuer un classement 
de la sorte, applicable en parallele a CSS3 : 

• les anciens navigateurs qui ne le supportent pas du tout ; 

• ceux qui possedent un debut de support limite, notamment via les nouvelles balises ; 

• ceux qui affichent un support progressif, grace aux nouvelles balises et a quelques 
API; 

• ceux qui tendent a proposer un support de plus en plus complet. 



Panorama des navigateurs web et moteurs de rendu 

II convient de distinguer les navigateurs et les moteurs de rendu. 

Les premiers exploitent les seconds au sein d'une interface utilisateur (en ajoutant 
menus, barre d'adresses, gestion de l'historique, extensions). II arrive que plusieurs 
navigateurs se partagent le meme moteur de rendu. 

Un moteur est charge de Interpretation du code HTML et de son rendu graphique 
a l'ecran avec l'application des feuilles de style CSS. II interprete egalement (lui- 
meme ou via un sous-moteur interne) le code JavaScript present dans la page, et 
delegue la lecture des medias (images, sons, videos, animations Flash) a des librairies 
nativement integrees au moteur ou presentes dans les extensions. 
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Tableau 3-1 Resume (simplifie) des correspondances entre principaux moteurs et navigateurs 



Moteur 


Navigateurs 


Developpement 


Licence 


Trident 


Internet Explorer 


Microsoft 


Proprietaire 


WebKit 


Google Chrome, Chromium, Apple Safari, 
Apple Safari Mobile, Android, Epiphany 


Apple, Google, KDE, Nokia, 
RIM, Palm, et autres 


Open Source (GNU LGPL) 


Gecko 


Mozilla Firefox, Camino, K-Meleon, Galeon, 
Flock 


Fondation Mozilla 


Open source (MPL, GNU 
GPL, GNU LGPL) 


Presto 


Opera, Opera Mobile, Opera Wii 


Opera Software 


Proprietaire 


KHTML 


Konqueror 


KDE 


Open Source (GNU LGPL) 



Bien d'autres applications et editeurs (Adobe Creative Suite, Mozilla Thunderbird, 
Adobe AIR, Mozilla Kompozer) exploitent ces moteurs. 

Chacun dispose (selon la version utilisee) de capacites bien definies pour le support 
de HTML et CSS. 

Actuellement, les moteurs evoluent a un rythme beaucoup plus soutenu que par le 
passe, il est done perilleux de dresser une liste exacte des fonctionnalites HTML 5, 
tant une mise a jour peut remettre en question une telle synthese. Cela est d'autant 
plus vrai avec les navigateurs dotes de mises a jour automatiques frequentes, telles 
que celles effectuees par Google Chrome. 



Prise en charge de HTML 5 

Les informations de prise en charge correspondent a un instantane lors de la redac- 
tion de cet ouvrage. II est tres probable que celles-ci soient reactualisees au fil des 
mois, et que le support des navigateurs soit ameliore par rapport au recapitulatif pro- 
pose. Consultez les sites de reference constamment mis a jour. La plupart des sources 
les plus fiables sont en anglais. 



Ressource Recapitulatifs en ligne des niveaux de support HTML 5 et CSS 3 

When can I use... 

► http://caniuse.com/ 

Find me by IP - browser support revealed 

► http://fmbip.com/ 

Comparaison des moteurs de rendu HTML 5 

► http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29 
Web specifications support in Opera products 

► http://www.opera.com/docs/specs/productspecs/ 
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Opera version history 

► http://www.opera.com/docs/history/ 
Chromium Web Platform Status 

► http://chromestatus.com 
Browserscope 

► http://www.browserscope.org/ 
HTML5 & CSS3 Readiness 

► http://html5readiness.com/ 
HTML5Test 

► http://html5test.com/ 



Notez que plusieurs navigateurs sont susceptibles de se partager le meme moteur, et qu'il 
est par exemple possible qu'une mise a jour affectant WebKit produise son effet dans 
Chrome puis Safari. 

Pour des details plus approfondis et une description des alternatives de remplacement, 
reportez-vous a chacun des chapitres decrivant en detail tous les elements HTML 5. 



Bibliotheques de detection et de modernisation 

Les navigateurs sont inegaux pour la comprehension HTML 5, depuis les elements 
de base (nouvelles balises) jusqu'aux differentes API complementaires. 

Des librairies JavaScript se proposent soit de pallier certains des manques, soit de 
renseigner sur les fonctionnalites supportees par le navigateur du visiteur. 

Modernizr 

Modernizr est surement la plus connue des librairies en ce qui concerne la detection 
HTML 5 et CSS 3. II s'agit d'un fichier JavaScript ajoutant des le chargement de la 
page des classes specifiques a I' element racine <html>. 

Celles-ci renseignent au sujet du support de fonctionnalites individuelles, soit a propos 
des styles CSS (border-radius, font-face, rgba, opacity, animations, etc.) soit a propos 
des API (Canvas, SVG, HTML 5 audio, HTML 5 video, geolocalisation, etc.). 

Modernizr ajoute egalement automatiquement la classe " j s " si JavaScript est active, reti- 
rant "no-js" si celle-ci est presente. II est alors conseille d'introduire le document ainsi : 
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Inclusion de Modernizr dans la page 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>Page de test navigateur</title> 
<script src="modernizr. js"x/script> 
</head> 

<html class="no-js"> 

Par exemple, dans le cas de l'API de dessin Canvas, l'attribut cl ass="canvas" est 
ajoute a <html>. Le fichier JavaScript utilise dans la balise <scri pt> est a telecharger 
sur le site officiel de Modernizr. 

Exemple d'etat de <html> apres execution de Modernizr 

<html class="js canvas"> 

D'une facon plus complete, avec Mozilla Firefox 3.6, on obtient : 

<html class="js canvas canvastext geolocation rgba hsla multiplebgs 
borderimage borderradi us boxshadow opacity no-cssanimations csscolumns 
cssgradients no-cssreflections csstransforms no-csstransforms3d no- 
csstransitions video audio localstorage sessi onstorage webworkers 
appl i cati oncache fontface"> 

Attention : il s'agit bien du code source modifie dynamiquement : vous devrez le 
consulter avec une extension (telle que Firebug pour Mozilla Firefox). Une simple 
visite dans le menu Code source du navigateur ne fournira que le code original charge 
avant l'execution de Modernizr. 

II devient alors possible d'ecrire des regies CSS precises dans la feuille de style. Elles 
seront appliquees en cas de support ou de non-support. 

Feuille de style CSS exploitant Modernizr 

.canvas div { 

/* proprietes concernant les elements div 
pour les navigateurs supportant Canvas */ 

} 

.no-canvas div { 

/* proprietes concernant les elements div 

pour les navigateurs ne supportant pas Canvas */ 

} 
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De meme, il est possible d'utiliser JavaScript pour lire les proprietes de l'objet 
Modernizr lorsqu'il s'agit d'implementer des fonctionnalites sans faire appel a la 
feuille de style. 

Script exploitant Modernizr 

"if (Modernizr .canvas) { 

var c = document. createEl ement( 'canvas') ; 
// ... 
} else { 

// Pas de suppport de Canvas 
} 

Libre a vous de choisir une solution alternative lorsque le non-support est detecte. 
Retenez que l'objet Modernizr renvoie true ou false selon le cas de figure ren- 
contre, et que les classes CSS appliquees a <html> portent generalement le nom de la 
propriete a detecter, prefixees de no- lorsque ce n'est pas le cas. Consultez la docu- 
mentation officielle pour obtenir la liste complete de ces classes. 



Ressource Telechargement de Modernizr 

Telechargement de Modernizr 

► http://www.modernizr.com/download/ 
Documentation officielle Modernizr 

► http://www.modernizr.com/docs/ 



En revanche, Modernizr n'ajoute aucune fonctionnalite manquante ou non imple- 
mentee. Seule la detection des capacites natives du navigateur est possible afin 
d'adapter le contenu (ou l'apparence) d'un site. 

html5shim (ou html5shiv) 

Ce petit script autorise l'usage des nouveaux elements HTML 5 sur Internet 
Explorer (<9). En effet, les versions jusqu'a la 8 incluse autorisent I'emploi de balises 
inconnues dans le document, mais ne permettent pas de leur affecter de proprietes de 
style, et surtout ne les affichent pas en bloc. 

Etant donne qu'Internet Explorer jusqu'a la version 8 y compris ne supporte pas la 
version 5 de HTML, celui-ci ignore tout simplement le rendu graphique des balises 
de type bloc (telles que section, header, footer, aside, nav...). 

Linclusion de ce JavaScript en tete de page declare l'ensemble des nouveaux tags 
grace a la fonction createEl ement, et permet par anticipation de les utiliser et de leur 
affecter un style CSS. 
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Ressource Telechargement de html5shim 

Le projet html5shim est heberge sur Google Code : 
► http://code.google.eom/p/html5shim/ 

Pour utiliser html5shim sur votre site, ajoutez les lignes suivantes dans 1' element 
<head> (avantvos declarations de styles CSS) : 

<! — [if It IE 9]> 

<scri pt src="http ://html 5 shim . googl ecode . com/svn/trunk/html 5 . js"> 
</scri pt> 
<! [endif]--> 

Attention : cette librairie n'apportera aucune des fonctionnalites intrinseques a 
HTML 5, e'est-a-dire que vous pourrez tout a fait utiliser sans valeur semantique 
particuliere les nouvelles balises <article> ou <header> (par exemple) pour y placer 
du contenu en blocs, mais <video> et <audio> et les autres API evoluees de 
HTML 5 ne produiront naturellement aucun effet. 



Frameworks HTML 

Les frameworks HTML sont des modeles types sur lesquels Ton peut se baser pour 
etablir le squelette initial d'un site. lis permettent de suivre un ensemble de bonnes 
pratiques pour la structuration des fichiers et du code. 

HTML 5 Boilerplate est parmi le plus plebiscite d'entre eux. 

II permet de profiter de corrections de bogues de support et d'un regroupement de 
scripts JavaScript reconnus pour leur utilite et leur qualite. Entre autres (certains cri- 
teres sont developpes plus en detail dans les prochains chapitres) : 

• une compatibilite multinavigateur (Internet Explorer 6 inclus) ; 

• des directives pour les navigateurs mobiles ; 

• une preparation pour l'utilisation de regies ©font-face ; 

• une degradation gracieuse et une amelioration progressive ; 

• des classes specifiques a Internet Explorer pour un controle plus fin sur les styles ; 

• des classes .jset . no- js pour la detection de la presence de JavaScript dans <body> ; 

• des classes . clearfix et . visual! yhidden pour traiter des elements de la bonne 
facon en termes d'accessibilite ; 

• un profiling JavaScript dans Internet Explorer 6 et 7 (qui n'en disposent pas) ; 

• une optimisation de console.log (non bloquant) ; 
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• un « reset CSS » et une normalisation des polices ; 

• une feuille de style impression (media, print) ; 

• un squelette adaptable pour iOS, Android, Opera Mobile ; 

• un fichier .htaccess pour une utilisation de fonctionnalites HTML 5 et l'opti- 
misation du chargement du contenu, des regies pour la compression et le cache 
(dates d'expiration) ; 

• un « fix PNG » pour Internet Explorer ; 

• un fichier pi ugi ns . j s deja pret pour jQuery ; 

• un fichier robots.txt ; 

• une page d'erreur 404 par defaut ; 

• un fichier crossdomai n . xml ; 

• un code pour Google Analytics. 

Attention : ce framework releve d'un condense d'experiences et de recommandations 
generalistes, par exemple celles definies par Yahoo et Google. II est possible que cer- 
taines ne soient pas applicables a un site particulier ou provoquent des effets non 
desires. II faut done toujours faire attention a comprendre tous les criteres utilises et 
dans quel but. 

Cela vaut pour la plupart des frameworks HTML rencontres sur Internet. lis 
demanderont toujours une adaptation pour etre utilisables, mais sont une bonne base 
pour proceder a des optimisations et gagner du temps en developpement. 

HTML 5 Reset est quant a lui un embryon de site avec une structure minimaliste, 
repartie dans des fichiers HTML, CSS et JavaScript classes par dossier. 



Ressource Frameworks HTML 5 

HTML 5 Boilerplate 

► http://html5boilerplate.com/ 
HTML 5 Reset 

► http://html5reset.org 

The M Project (HTML 5 JavaScript framework) 

► http://the-m-project.net/ 
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Sachez quels sont vos visiteurs 

Lorsqu'il s'agit de concevoir un site, une des premieres etapes est de penser au public 
qui le frequentera. Cela vous permettra de savoir (ou de presumer) quelle est I'affinite 
des visiteurs avec la technologie et s'il est probable que leur navigateur soit recent. 
Avec cette information, vous pourrez determiner : 

• Si le choix de la technologie HTML 5 est justifie (et eventuellement CSS 3). 

• Si vous devez fournir des alternatives afin que le site reste fonctionnel. 

• Si vous devez considerer la probability de consulter le site depuis un navigateur 
mobile. 

• Si vous devez detecter le niveau de support graduel des navigateurs (avec les librai- 
ries JavaScript decrites precedemment). 

• Si vous devez informer les visiteurs en consequence lorsque le manque de support 
les privera d'acceder a certains contenus du site. 

Les disparites peuvent etre relativement significatives selon les regions du monde et 
le type de visiteur concerne. Si vous ne disposez pas de chiffres significatifs, consultez 
les sites proposant des statistiques globales en gardant bien a I'esprit que les don- 
nees proviennent souvent d'echantillons sur I'Amerique du Nord. 

► http://gs.statcounter.com/ 

> http://www.w3schools.com/browsers/ 
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Decrivons le doctype et tous les elements, de <a> a <wbr>. Sachez tout de 
leur usage et de leurs attributs - globaux ou specifiques - pour ne pas 
baliser ! 




Figure 4-1 De tres pres 
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Le langage HTML repond a une nomenclature precise. Bien quelle soit relative- 
ment permissive dans sa syntaxe, il convient de connaitre les balises et les situations 
dans lesquelles il est d'usage de les employer. 

A l'instar des elements chimiques composant notre monde et crees lors de la nais- 
sance de l'Univers puis dans le cceur de chacune des etoiles, les elements HTML 
sont les briques primordiales du Web tel que nous le connaissons aujourd'hui. 

Le Big Bang du Web, c'est Tim Berners-Lee. Les etoiles, ce sont les groupes de tra- 
vail du W3C et du WhatWG qui oeuvrent a une nucleosynthese juste et equilibree. 

Josh Duck s'est risque a une experimentation graphique concretisant cette idee. 



Figure 4-2 

Tableau periodique des 
elements... HTML 
http://joshduck.com/ 
periodic-table.html 
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C'est une allegorie tres juste, car tous ces elements repondent a des caracteristiques 
semblables aux atomes. 

• Certains ont beaucoup d'affinites entre eux et c'est leur association qui cree de 
nouvelles briques. 

• D'autres sont plutot solitaires. 

• La plupart sont abondants, tandis qu'il en existe de rares. 

• De nouveaux seront synthetises. 

• Quelques dechets sont radioactifs et doivent etre oublies (<blink>). 

Heureusement, en HTML, aucun element n'est hors de prix. Tous sont utiles et 
libres : il faut s'en servir sans restriction ! 

Dans ce chapitre, le mot « element » sera frequent. Une specification est bien souvent 
repetitive et autorise difficilement de multiples synonymes pour designer un concept 
precis. Sa lecture releve d'un savant melange d'anaphores et d'epiphores peu distrayantes. 
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Ainsi seront decrits les elements HTML 5 tels que figurant dans la specification 
courante du W3C et du WhatWG. Certains d'entre eux sont herites de HTML 4 et 
beneficient done d'un vaste support, commun a tous les navigateurs. 

D'autres sont recents et peuvent engendrer plusieurs situations : 

• aucun support : dans ce cas, le navigateur n'affichera rien ou adoptera un compor- 
tement erratique selon le role joue par cet element dans la page ; 

• un support partiel : le navigateur gerera un sous-ensemble des fonctionnalites prevues ; 
celui-ci sera probablement complete voire finalise dans une version ulterieure ; 

• un support complet : si le navigateur repond a l'ensemble des indications de la specifi- 
cation, et que tous les attributs et leurs valeurs produisent le comportement attendu. 

Si vous avez lu l'introduction precedente, si vous avez deja consulte le code source d'une 
page web dans le navigateur, si vous etes webmaster, integrateur ou developpeur experi- 
mente, ou si vous etes un amateur passionne, la syntaxe HTML devrait vous etre fami- 
liere. Elle est aisement reconnaissable de par sa constitution en balises et en attributs. 

Vous trouverez dans les exemples qui vont suivre tous les renseignements necessaires 
pour apprivoiser ce langage et decouvrir l'integralite des possibilites offertes par 
chacun des elements faisant partie de la specification HTML 5, ainsi que tous les 
attributs applicables. 

Les attributs globaux pouvant etre utilises pour toutes les balises seront decrits en fin de 
chapitre, tandis que les attributs specifiques a l'un ou l'autre element seront detailles a la 
suite de chaque description. Si aucune mention d'attribut specifique n'y est faite, e'est 
que l'element n'en possede pas, et que seuls les attributs globaux s'appliquent. 

Le style par defaut de ces elements est precise, bien qu'il ne s'agisse que d'une recom- 
mandation que les editeurs de navigateurs implementent avec plus ou moins de liberte. 
Par essence, il reste tres depouille et leur confere une apparence quelque peu austere en 
regard des riches interfaces graphiques auxquelles nous sommes tous habitues. 

Si vous etes impatient pour la mise en pages et la presentation, il vous appartiendra 
d'utiliser les feuilles de style CSS, qui ont deja ete introduites au prealable et qui font 
l'objet d'un chapitre complementaire en fin d'ouvrage. 

Tous les elements HTML cohabitant en symbiose, il est difficile de les analyser un 
par un sans devoir souvent faire reference a un point developpe ulterieurement pour 
une balise particuliere. Ce chapitre n'est done pas totalement lineaire. 

Modeles de contenu 

Classifier les elements HTML n'est pas une tache evidente, tant ils ont besoin les 
uns des autres, et tant leurs proprietes respectives pouvant mener a l'un ou l'autre 
regroupement se recouvrent, d'un mode de classification a l'autre. 
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La specification degage cependant trois types de modeles de contenu, en plus du 
texte simple : 

• les elements de flux, qui structurent le document ; 

• les elements de phrase, qui sont en general imbriques dans les precedents, et con- 
ferent une valeur semantique particuliere a leur propre contenu ou qui correspon- 
dent a des elements medias ou de formulaire ; 

• les elements de metadonnees (ou meta-informations), qui apportent des rensei- 
gnements complementaires au contenu ou agissent sur la presentation. 



Categorie 



Tableau 4-1 Modeles de contenu HTML 5 
Elements 



Contenu de flux 


a, p, hr, pre, ul , ol , dl , div, hi, h2, h3, h4, h5, h6, 
hgroup, address, blockquote, ins, del, object, map, 
noscript, section, nav, article, aside, header, footer, 
video, audio, figure, table, form, fieldset, menu, 
canvas, details 
ou elements de phrase 
ou texte 


Contenu de phrase 


a, em, strong, small, mark, abbr, dfn, i, b, s, code, 
var, samp, kbd, sup, sub, q, cite, span, bdo, bdi , br, 
wbr, ins, del, img, embed, object, iframe, map, area, 
script, noscript, ruby, video, audio, input, textarea, 
select, button, label, output, datalist, keygen, 
progress, command, canvas, time, meter 
ou texte 


Metadonnees 


link, style, meta name, meta http-equiv, meta charset, 
script, noscript, command 



Ainsi du contenu phrase correspondra a une succession de : 

• chaines de caracteres (du texte), 

• potentiellement epaulees par des elements de phrase. 



Le doctype avant tout 

Un document HTML doit toujours debuter par un doctype, avant meme la premiere 
balise <html>. II s'agit d'une declaration permettant de renseigner le navigateur sur le 
type de document HTML delivre. II ne s'agit pas d'un tag HTML a part entiere, mais 
bien d'un preambule. 

Jusqu'a HTML 5, le doctype mentionnait l'utilisation d'un document de reference, la 
DTD (Document Type Definition) \ grammaire resumant la syntaxe HTML et ses attributs. 
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Depuis HTML 5, le doctype a ete considerablement simplifie puisqu'il n'est pas sensible a 
la casse, qu'aucune DTD n'est precisee, et que Ton se limite a une declaration laconique : 

Doctype HTML 5 

<! doctype htm"l> 

Ce doctype permet tout comme c'etait le cas en HTML 4 de passer en mode de 
rendu conforme aux standards dans les navigateurs se basant sur le « doctype 
sniffing », c'est-a-dire d'abandonner le mode « quirks ». 



Rappel Le mode quirks 

Ce mode est une technique utilisee par certains moteurs de rendu pour maintenir une compatibilite artif icielie 
vis-a-vis des pages concues pour d'anciens navigateurs, en simulant intentionnellement de nombreux bogues 
d'interpretation du code, au lieu de suivre le mode des standards W3C. Cependant, ce mode « quirks » a 
pose de nombreux problemes d'integration, le meme code produisant des resultats souvent bien differents a 
I'ecran. Pour plus de renseignements a ce sujet, consultez le site de Peter-Paul Koch (en anglais) : 

► http://www.quirksmode.org/ 



La specification prevoit une declaration retrocompatible (sous la forme des prece- 
dentes) dans le cas ou le contenu HTML serait genere par un outil devant respecter 
cette structure, par exemple un script execute sur le serveur. 

Doctype HTML 5 de compatibilite 

<! DOCTYPE html SYSTEM "about : 1 egacy-compat"> 

Celle-ci ne peut etre utilisee que s'il est impossible d'utiliser le doctype raccourci. 

Dans le cas d'une page XHTML 5 (voir chapitre precedent), on precisera l'espace de 
noms avec l'attribut xmlns en veillant bien a utiliser des majuscules pour l'introduc- 
tion du doctype : 

Doctype XHTML 5 

<! DOCTYPE htm"l> 

<html xml ns="http ://www. w3 . org/1999/xhtml "> 

Rappel des precedents doctypes 

Les precedents doctypes faisaient appel, selon le standard HTML utilise, a des 
variantes (Strict, Transitionnal, Frameset) autorisant ou non l'emploi de certaines 
balises. En copiant l'adresse de la DTD dans un navigateur, il est possible de prendre 
connaissance de la grammaire HTML. 
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HTML 4.01 Strict 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http : //www. w3 . org/TR/html 4/stri ct . dtd"> 

HTML 4.01 Transitional 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http : //www. w3 .org/TR/html 4/1 oose . dtd"> 

HTML 4.01 Frameset 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http : //www. w3 .org/TR/html 4/f rameset . dtd"> 

XHTML 1.0 Transitionnel 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
" http : //www . w3 . org/TR/xhtml 1/DTD/xhtml 1-t ransi ti onal . dtd"> 

XHTML 1.0 Strict 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : //www. w3 .org/TR/xhtml 1/DTD/xhtml 1-st ri ct . dtd"> 

XHTML 1.0 Frameset 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http : //www. w3 .org/TR/xhtml 1/DTD/xhtml 1-f rameset . dtd"> 

XHTML 1.1 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
" http : //www . w3 .org/TR/xhtml 11/DTD/xhtml 11 . dtd"> 



Elements racines et meta-informations 

<html> 

L' element <html> constitue la racine de tout document HTML. II suit en general le 
doctype et clot l'ensemble en fin de page par une balise fermante </html>. 

II ne peut contenir qu'un seul element <head> suivi immediatement par un <body>. 

Parmi les attributs globaux (voir fin de ce chapitre) qui sont applicables a l'ensemble 
des elements HTML, il faut noter que lang est tres fortement recommande pour 
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l'element racine <html>. Un attribut lang vide correspond a un langage inconnu. 
Dans un ecosysteme XHTML, il est preconise de l'epauler par un attribut xml : 1 ang 
possedant la meme valeur. En cas d'absence totale de 1 ang, le navigateur se refere a 
l'en-tete HTTP Content- Language. Si ce dernier est egalement absent, alors le 
document est de langue inconnue. 

Exemple d'utilisation de <html> 

<!DOCTYPE htm"l> 
<html lang="fr"> 

<head> 

<!-- L'en-tete du document --> 
</head> 

<body> 

<!-- Le corps du document --> 
</body> 

</html> 



Tableau 4-2 Attributs specifiques a <html> 



Attribut 


Valeurs 


Role 


mani fest 


URL 


Adresse du manifeste controlant le cache des fichiers pour 


nouveau 




une utilisation en mode deconnecte 



manifest 

L' attribut manifest entre en jeu dans l'elaboration d'applications web executees hors 
ligne (voir chapitre Applications web hors ligne). 



Tableau 4-3 Proprietes de l'element <html> 


Propriete 


Details 


Modeles de contenu autorises 


Un element <head> suivi par un element <body> . 


Omission de balise 


La balise ouvrante peut etre omise si le premier contenu n'est pas un com- 
mentaire. 

La balise fermante peut etre omise si cet element n'est pas immediatement 
suivi par un commentaire et s'il contient un element <body> qui n'est pas 
vide et dont la balise ouvrante n'a pas ete omise. 


Style par defaut 


html { 

display: block; 

} 

html : focus { 
outline: none; 

} 
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<head> 

L'en-tete du document exerce un role crucial, car il fournit de multiples renseigne- 
ments sur le document lui-meme, que le contenu n'indique pas. 

Dans cette optique, il recueille plusieurs autres balises aux roles precis. Parmi celles- 
ci, seule <title> est obligatoire. 

Tableau 4-4 Imbrications pour <head> 



Element 


Occurrences 


Role 


<title> 


1 


Titre du document 


<meta> 


ou + 


Meta-informations 


<1 i nk> 


ou + 


Relations vers des ressources externes (par exemple des 
feuilles de style CSS) 


<style> 


ou + 


Styles CSS embarques dans le document 


<script> 


ou + 


Scripts embarques dans le document 


<base> 


ou 1 


Base d'adresses par defaut et de cible pour tous les liens du 
document 



Exemple d'utilisation minimale de <head> 

<!DOCTYPE html> 
<html lang="fr"> 

<head> 

<ti tl e>Ti tre du document</ti tl e> 
</head> 
<body> 

<!-- Le corps du document --> 
</body> 

</htm"l> 

L'ordre de declaration n'est pas important. Ces elements sont individuellement 
decrits ci-apres dans leurs sections respectives. 

Exemple d'utilisation plus complete mais totalement imaginaire de <head> 

<!DOCTYPE htm1> 
<html lang="fr"> 

<head> 

<!-- Encodage des caracteres --> 
<meta charset="utf-8"> 
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<!-- Base generale des liens --> 

<base href="http://www. al sacreati ons . com/page/kiwi z/"> 

<!-- Titre du document --> 
<title>Ma page sur les kiwi s</ti tl e> 

<!-- Une feuille de style --> 

<link rel="stylesheet" href="css/screen . ess" type="text/css" 
medi a="screen"> 

<!-- Des styles compl ementai res --> 
<style type="text/css"> 
P { 

font-fami ly: Sans-serif ; 
text-al i gn : center ; 

} 

</style> 

<!-- Un fichier JavaScript externe --> 
<script src="js/global . js"x/script> 
</head> 

<body> 

<p>Ceci est ma premiere page HTML5.</p> 
</body> 

</html> 

Puisqu'il s'agit de meta-informations, aucune des balises n'est affichee dans la zone 
reservee au document HTML. Seul <title> a une influence directe puisqu'il s'agit 
du titre generalement attribue par le navigateur a la fenetre courante ou a l'onglet, 
suivi du nom de l'application. 



Figure 4-3 

Implication de <title> sur 
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Tableau 4-5 Proprietes de I'element <head> 



Propriete 


Details 


Modeles de contenu autorises 


Un element <ti tl e>, un element optionnel <base>, des elements de 
meta-information. 


Parents autorises 


<html> 


Omission de balise 


La balise ouvrante peut etre omise si le premier contenu est un element. 
La balise fermante peut etre omise si I'element <head> n'est pas immedia- 
tement suivi par un commentaire ou une espace. 
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Tableau 4-5 Proprietes de I'element <head> (suite) 



Propriete 


Details 


Style par defaut 


head { 




display: none; 




} 



<titlc> 

Le titre du document detenu par <ti tl e> est affiche par le navigateur dans le titre de 
la fenetre et/ou dans l'onglet actif. II est aussi choisi, a juste titre, comme intitule du 
lien dans les resultats des moteurs de recherche. 

Exemple d'utilisation de <title> 

<!DOCTYPE html> 
<html lang="fr"> 

<head> 

<meta charset="utf-8"> 
<title>Ma page sur les kiwis</title> 

</head> 

<body> 

<p>Ceci est ma premiere page HTML5.</p> 
</body> 

</html> 

II ne faut pas confondre cet element dont le contenu ne figure pas dans la zone de 
rendu, et la balise <hl> qui releve d'un titre de premier niveau et qui n'est pas obliga- 
toirement liee au veritable titre du document. 



Tableau 4-6 Proprietes de I'element <title> 


Propriete 


Details 


Modeles de contenu autorises 


Texte simple. 


Parents autorises 


<head> 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 


Style par defaut 


title { 

display: none; 

} 



<meta> 

En complement du titre, les balises <meta> comblent le besoin de vehiculer plus de 
meta-informations au sujet du document. II s'agit la aussi de renseignements qui ne 
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sont pas affiches dans le corps de la page, mais qui sont importants pour son inter- 
pretation ou son referencement par les moteurs de recherche. 

On distingue plusieurs applications, chacune definie par l'usage au choix : 

• d'un attribut name, et content ; 

• d'un attribut http-equiv et content ; 

• d'un attribut charset seul. 



Tableau 4-7 Attributs specifiques a <meta> 



Attribut 



Valeurs 



name 


appl i cation-name 

author 

description 

generator 

keywords 

ou autres valeurs 
enregistrees 


Meta-informations relatives a la page : nom de I'application 
web, auteur, description du contenu, programme de concep- 
tion utilise, mots-cles relatifs au contenu. 


http-equiv 


refresh 

default-style 

content-type 


RafraTchissement de la page. 
Feuille de style preferee. 

Declaration de la page de code et du type MIME. 


content 


texte 


En combinaison avec name et http-equiv, confere sa 
valeur a la balise. 


charset 


encodage des caracteres 


Declaration de la page de code qui doit etre utilisee pour 
I'interpretation, si celle-ci est differente de I'ASCII. 



<meta name> 

L'attribut name lui-meme possede un ensemble de valeurs autorisees, choisies parmi 
deux ensembles : 

• un des noms definis par la specification (voir tableau ci-apres) ; 

• un des noms suggeres et enregistres sur la page http://wiki.whatwg.org/wiki/ 
MetaExtensions. 

Tableau 4-8 Valeurs definies par la specification pour l'attribut name de I'element <meta> 
Attribut Valeurs Role 



application-name 


texte 


ChaTne de texte courte donnant un nom a I'application web que la page 
represente, si tel est le cas. Sinon, ne doit pas etre utilise. Un tel nom est 
susceptible d'etre affiche par le navigateur dans sa barre de titre en lieu 
et place du titre du document qui peut varier d'une page a I'autre. 


author 


texte 


Auteur du document. 


descri pti on 


texte 


Description (de longueur raisonnable) du contenu, appropriee pour 
I'indexation dans les moteurs de recherche. 
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Tableau 4-8 Valeurs definies par la specification pour I'attribut name de I'element <meta> (suite) 
Attribut Valeurs Role 



keyword 


texte 


Liste de mots-cles separes par des virgules, pertinents pour le contenu 
de la page, susceptibles d'etre utilises par les moteurs de recherche. 


generator 


texte 


Programme ou systeme ayant genere le contenu. Ne doit pas etre utilise 
si le document est concu « a la main ». 



L'adjonction d'un autre attribut content est obligatoire, c'est lui qui recueille la 
valeur que Ton souhaite associer a chacune des proprietes figurant dans name. 



Exemples d'utilisation de <meta name> 

<meta name="author" content="Moi -meme"> 

<meta name="description" content="Tout savoi r sur la culture des kiwis 

et leurs effets benefiques sur la sante"> 

<meta name="keywords" content="kiwi s , fruits, vitamines"> 

<meta name="generator" content="Mon editeur HTML"> 

<!-- Pour une application web seulement --> 

<meta name="appl i cation-name" content="Mon webmail"> 



<meta charset> 

L'attribut charset est nouveau en HTML 5. II specifie l'encodage des caracteres uti- 
lise. Cette declaration doit etre unique pour l'ensemble d'un document. 

Si un document ne debute pas par un marqueur BOM et que son encodage n'est pas 
explicitement indique par un en-tete HTTP Content-type, alors la page de caracteres 
doit etre compatible avec 1' ASCII. S'il ne s'agit pas d ASCII lui-meme, alors l'encodage 
doit etre specifie par cet element <meta> equipe de l'attribut charset, ou par un element 
<meta> dont la valeur de l'attribut http-equi v est content-type (voir ci-apres). 

Idealement, il faut placer cette declaration avant les autres balises possibles de la sec- 
tion <head>, car elles sont susceptibles de comporter des chaines de texte concernees 
par le choix de l'encodage. Les valeurs les plus communes sont UTF-8, ISO-8859-1 
(Latinl) et ISO-8859-15 (Latin9). 

Exemple d'utilisation de <meta charset> pour UTF-8 

<meta charset="UTF-8"> 

Exemple d'utilisation de <meta charset> pour ISO-8859-1 (Latinl) 

<meta charset="ISO-8859-l"> 
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<meta http-equiv> 

Depuis HTML 5, l'attribut http-equi v ne peut plus comporter de valeur libre, mais 
uniquement une choisie parmi les suivantes : content-type, default-style, 
refresh. La valeur content-language est desormais obsolete, et doit etre remplacee 
par l'usage de l'attribut 1 ang sur I'element racine (<html >). 

Tableau 4-9 Valeurs definies par la specification pour l'attribut http-equiv de I'element <meta> 



Attribut 


Valeurs 




refresh 


entier positif 


RafraTchissement de la page a intervalles reguliers 
exprimes en secondes. 


refresh 


entier 

pos 7 ti f; url=URL 


Redirection vers I'adresse URL, apres un delai exprime 
en secondes. 


default-style 


valeur de l'attribut ti tl e d'un 
element <styl e> ou <1 i nk 
rel="stylesheet"> 


Definit quel ensemble de style doit etre applique par 
defaut, si celui-ci est nomme. 


content-type 


Pour la syntaxe HTML : 

text/html ; charset=code 
d'encodage des caracteres 
Pour la syntaxe XML : 

text/html ;charset=UTF-8 


Declaration du type MIME et de I'encodage des carac- 
teres du document. 



Exemples d'utilisation de <meta http-equiv> 



<!-- Raf ran chi ssement de la page toutes les minutes --> 
<meta http-equiv="ref resh" content="60" /> 

<!-- Redirection vers une autre URL au bout de 5 secondes --> 
<meta http-equiv="ref resh" content="5 ; url =http ://www. bl up . f r" /> 

<!-- Declaration de 1 'ensemble de style prefere --> 

<style ti tl e="monstyl el">< ! -- CSS --></style> 

<meta http-equiv="default-style" content="monstyl el"> 

<!-- Declaration de I'encodage des caracteres --> 

<meta http-equi v="content-type" content="text/html ; charset=UTF-8"> 



Propriete 



Tableau 4-10 Proprietes de I'element <meta> 
Details 



Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de metadonnees et 
<noscri pt> (sauf pour les valeurs content-type et content- 
language). 
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Propriete 



Tableau 4-10 Proprietes de I'element <meta> (suite) 
Details 



Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 


Style par defaut 


meta { 

display: none; 

} 



<link> 



L'element <link> represents une meta-information qui exprime des relations inter- 
documents. Son role est exprime grace a la valeur de l'attribut rel . 

Tableau 4-11 Attributs specifiques a <link> 



Attribut 


Valeurs 


Role 


href 


URL 


Adresse de la cible. 


hreflang 


code langue 


Langue de base du document cible. 


rel 


al ternate , 
archives, author, 
first, help, icon, 
index, last, 
license, next, 
pingback, prefetch, 
prev, search, 
si debar , 

stylesheet, tag, up 


Indique la relation existant entre le document courant et celui 
de la cible (valable uniquement si l'attribut href est precise). 
(Ne sont pas autorises contrairement a <a> : bookmark, 
external, nofollow, noreferrer) 
Pour une description precise des roles joues par chacune des 
valeurs possibles de l'attribut rel, reportez-vous a I'avant- 
derniere section de ce chapitre « Relations des liens ». 


medi a 


media query 


Specifie une requete de media pour laquelle la cible est opti- 
mised (voir I'annexe B en ligne sur les feuilles de style CSS). 


type 


type MIME 


Specifie le type MIME de la cible, par exemple : 
text/javascri pt pour du code JavaScript ; 
text/ess pour une feuille de style CSS. 


sizes 
nouveau 


any 
ou 

hauteur x largeur 


Dans le cas d'une relation icone (rel="i con"), indique les 
dimensions de I'image en pixels. Plusieurs valeurs peuvent 
etre indiquees, separees par des espaces. 
Le terme any indique que I'image convient a plusieurs reso- 
lutions, par exemple lorsqu'elle est au format vectoriel SVG. 



Exemples varies d'usage de <link> 



<!-- Icone associee au document --> 

<link rel="icon" href="i cone . gi f " type="image/gif" sizes="32x32"> 
<!-- Autre icone associee au document --> 

<link rel="icon" href=i cone . svg sizes="any" type="image/svg+xml "> 
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<!-- Feuille de style pour 1'affichage --> 

<link rel="stylesheet" type="text/css" href="css/styl es . ess" 
media="screen"> 



<!-- Feuille de style pour 1 ' impression --> 

<link rel="stylesheet" type="text/css" href="css/print.css" 

media="print"> 



<!-- Flux de syndication --> 

<link rel="alternate" type="appl i cation/rss+xml " href="f 1 ux . rss" 
ti tl e="Actual i tes"> 



<!-- Licence d'utilisation (Creative Commons BY-NC 2.0) --> 

<1 i nk rel="l i cense" href="http : / /creati vecommons .org/1 i censes/by-nc/ 

2.0/fr/"> 

Les applications de <link> sont ainsi multiples. Elles peuvent avoir une consequence 
tant sur la presentation du document (stylesheet) que sur les ressources qui lui sont 
attachees (i con) et sur le comportement du navigateur vis-a-vis du reseau (prefetch). 



Propriete 



Tableau 4-12 Proprietes de I'element <link> 
Details 



Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de metadonnees et 
<noscri pt>. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 


Style par defaut 


link { 

display: none; 

} 



<stylc> 

En complement d'une feuille de style externe - qui reste la solution la plus perfor- 
mante et la plus modulaire pour un site classique - I'element <styl e> permet d'intro- 
duire des proprietes specifiques au document courant. Son contenu doit exclusive- 
ment relever de la syntaxe des feuilles de style. Les proprietes seront appliquees au 
corps de la page et a ses descendants si ceux-ci satisfont aux selecteurs CSS indiques. 



Tableau 4-13 Attributs specifiques a <style> 



Attribut Valeurs 


Role 


type 


type MIME 


Type MIME d'un langage de style. Dans I'extreme majorite 
des cas, il s'agira de text/ess . 


media 


media query 


Specifie une ou plusieurs requete(s) de media a laquelle I'ins- 
truction de style sera appliquee. 
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Tableau 4-13 Attributs specifiques a <style> (suite) 



Attribut Valeurs 


Role 


scoped 
nouveau 


scoped 


Indique que les instructions de style s'appliquent uniquement 
a I'element parent qui contient la balise <styl e> ainsi qu'a 
ses descendants. 

Si cet attribut est absent, les proprietes CSS s'appliqueront a 
I'ensemble du document. 



Par convention, la balise <styl e> figure dans l'en-tete du document, mais il faut savoir 
quelle est egalement permise dans les elements <div>, <noscript>, <section>, 
<article> et <aside>. C'est dans cette situation que le nouvel attribut scoped 
demontre tout son interet pour rendre sa portee locale a I'element qui la contient. 



Exemple d'utilisation conventionnelle de <style> 

<!doctype html> 
<html lang="fr"> 

<head> 
<meta charset="utf-8"> 
<title>Ma page sur les kiwis</title> 
<style type="text/css" media="screen"> 
body { 
background:#EFECCA; 

} 

P { 

color:#78A419; 
font-size:2em; 
text-al ign:center; 
border :3px solid #B5E655; 
background: white; 
padding: lem; 
width: 50%; 
margin :2em auto; 

} 

</style> 
</head> 

<body> 

<p>Ce paragraphe a du style !</p> 
</body> 

</html> 

Notez que cette balise est particuliere et que son contenu n'est pas remplacable dyna- 
miquement en JavaScript. 
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Figure 4-4 

Application de styles 



Ha page sur les kfwb - MozflLa Ffrefox 



Fichier Edition AfficTiage Historique Marque -pages Out la Accessibility 



- C X & (□_ 



i | Ma page slt les kiwi 



Ce paragraphe a du style ! 



<hl> F?- Termini- 



media 

L'attribut medi a specifie une ou plusieurs requete(s) de media (media query) pour laquelle 
1'instruction de style sera appliquee (voir l'annexe B en ligne sur les feuilles de style CSS). 

Exemples d'utilisation de l'attribut media 

<!-- Styles pour 1 'affichage --> 

<style media="screen"> 

/* ... instructions CSS ... */ 

</style> 

<!-- Feuille de style pour 1 'impression --> 

<style media="print"> 

/* ... instructions CSS ... * I 

</style> 

<!-- Feuille de style pour 1 'affichage sur ecran de largeur inferieure a 640px --> 
<style media="screen and (max-width:640px)"> 



/'•'•' ... instructions CSS 
</style> 


... */ 


Tableau 4-14 Proprietes de I'element <style> 


Propriete 


Details 


Modeles de contenu autorises 


Donnees texte (instructions CSS). 


Parents autorises 


Tout element pouvant contenir des elements de metadonnees, <di v>, 
<noscript>, <section>, <article>, <aside>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


style { 

display: none; 

} 
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<base> 



L'unique element <base> situe dans la section <head> represente une base commune 
pour tous les elements du document. II est bien entendu facultatif. 

On precise soit Fun ou 1' autre de ses deux attributs, soit les deux en meme temps. 
Afin de le rendre actif pour toutes les ressources, il est conseille de le placer en tant 
que tout premier element dans <head> , car les suivants utiliseront son information. 



Attribut 



Valeurs 



Tableau 4-15 Attributs specif iques a <base> 
Role 



href 


URL 


Indique I'adresse a utiliser comme base de reference (prefixe) 
pour tous les hyperliens du document. 


target 
<nouveau> 


_bl ank 
_parent 
_self 
_top 

nom d'un element de type 
iframe (attribut name) 


Cible par defaut pour I'ouverture de tous les liens de la page. 
Cette indication generale peut etre contournee individuelle- 
ment en utilisant un attribut target dans tout lien. 



href 

L' element <base> sert d'adresse de reference pour tous les liens relatifs mentionnes 
dans le code HTML (que ce soient des liens avec l'attribut href, ou des images avec 
l'attribut src, etc.). 

target 

L'element <base> definit un contexte de navigation commun pour I'ouverture des liens. 
II s'agit d'un element vide qui consiste en une seule balise (pas de balise fermante). 
Tableau 4-16 Proprietes de l'element <base> 



Propriete 


Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


<head> 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



<body> 

Apres tous les elements susceptibles d'etre contenus dans l'en-tete du document, ce 
dernier prend fin avec une balise fermante </head>, et Ton passe au corps propre- 
ment dit de la page HTML. 
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Exemple d'utilisation de <body> 

<!DOCTYPE html> 
<html lang="fr"> 

<head> 

<meta charset="utf-8"> 
<title>Ma page sur les kiwis</title> 
</head> 

<body> 

<p>Ceci est ma premiere page HTML5.</p> 
</body> 

</html> 

Ce corps est integralement contenu entre <body> et </body>. On y retrouve toutes les 
autres balises decrites dans la suite de cet ouvrage. La seule balise susceptible de 
figurer apres cet element est </html> pour clore totalement le document. 



Tableau 4-17 Proprietes de I'element <body> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


<html> 


Omission de balise 


La balise ouvrante peut etre omise si le premier contenu n'est pas un com- 
mentaire ou une espace, sauf s'il s'agit de <scri pt> ou <styl e>. 
La balise fermante peut etre omise si cet element n'est pas immediatement 
suivi par un commentaire, et s'il n'est pas vide ou que sa balise ouvrante n'a 
pas ete omise. 


Style par defaut 


body { 

display: block; 
margin: 8px; 

} 

body: focus { 
outline: none; 
} 





Groupement 

Les balises de groupement sont avant tout destinees a en grouper d'autres. Truisme. 

<div> 

Conteneur generique par excellence, <div> represente une division de document. 
D'un point de vue semantique, il n'a aucune valeur et n'est voue qua regrouper des 
elements ayant des proprietes communes. 
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Exemple (('utilisation de <div> 
<div> 

<p>Un paragraphe</p> 

<img src="orange. jpg" alt="Une photo d'orange"> 
<p>Un autre paragraphe</p> 
</div> 

Ces proprietes peuvent etre de nature graphique (un rassemblement d'elements dans 
un conteneur possedant un attribut class specifique, pour positionner l'ensemble 
grace aux feuilles de style et leur affecter des proprietes CSS individuellement), ou 
relever d'attributs partages tels que lang ainsi applique a <div> et tous ses enfants. 

Exemple d'utilisation de <div> 

<div lang="fr" class="introduction"> 

<p>Parag raphe d ' i ntroduction</p> 
</div> 

<div class="suite"> 

<p>Un autre paragraphe</p> 
</div> 

Neutre en termes d'apparence par defaut hormis son affichage en bloc, l'dement 
<div> est ainsi tres couramment employe pour en regrouper d'autres. Neanmoins, il 
faut eviter la divite, syndrome d'un usage excessif d'elements <di v> meme lorsque ce 
n'est pas necessaire ou que d'autres elements sont plus appropries (<p>, <article>, 
<header>, <footer>...). C'est pourquoi <div> doit etre considere dans l'absolu 
comme un element de dernier recours. 

II ne faut pas non plus le voir comme interchangeable avec <p>, selon que Ton veuille 
appliquer des marges - conferees par le style par defaut applique par le navigateur - 
entre blocs successifs ou non. Une « division » peut grouper quasiment tous les types 
d'elements ainsi que d'autres <div>, tandis qu'un paragraphe est uniquement destine 
a abriter du texte et des elements de phrase, mais pas d'autre paragraphe. 



Tableau 4-18 Proprietes de I'element <div> 


Propriete 


Details 


Modeles de contenu autorises 


Zero ou plusieurs elements <styl e>, suivis de contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


div { 

display: block; 

} 
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<span> 

A la difference de <div>, un conteneur <span> est specifiquement dedie au contenu 
phrase. En revanche, tout comme lui, il ne possede pas de sens particulier d'un point 
de vue semantique. 

II peut etre utilise egalement pour grouper des elements ou une portion de texte a des 
fins d'affectation de styles (par exemple en utilisant les attributs id ou class) ou de 
partage d'attributs. 

Exemple d'utilisation de <span> 

<p>HTML signifie <span lang="en">Hypertext Markup Language</span> en 
angl ai s . </p> 

Tout comme <div>, <span> doit en theorie n'etre utilise qu'en dernier recours 
lorsqu'il n'existe aucun autre element plus approprie. 

II ne possede pas de style par defaut, et reste lui-meme un element de type en ligne. 
On ne peut done y placer d'elements de type bloc. 

Tableau 4-19 Proprietes de I'element <span> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



Liens 

<a> 

C'est le H de HTML, mais contrairement au H de Hawai, il n'est pas inutile pour 
surfer. C'est la cle de voute de la dimension hypertexte. L'element <a> {anchor en 
anglais ou ancre ) est un hyperlien. 

L'activer - cliquer dessus dans la plupart des cas - signifie au navigateur que Ton sou- 
haite changer d'adresse de navigation et consulter une autre ressource. Ce fondement 
meme des principes du Web n'est pas tres complexe a mettre en ceuvre. II convient en 
general de savoir ecrire l'adresse de destination dans l'attribut href, eventuellement 
complete par des renseignements precises dans les autres attributs. 
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<p>Pour fouiller dans les archives du Web, consul tez <a href="http:// 
web. archive. org/">Internet Archive : Wayback Machine</a> ou le tres 
emi nent <a href ="http: //www. azertyO. i ronie.org/">azertyO</a> . </p> 



Figure 4-5 P° ur fouiller dans les archives du web, consultez Internet 

Apparence des liens par defaut Archive : Wayback Machine ou le tres eminent azertyO 

http://web.archive.org/ 



Tableau 4-20 Attributs specifiques a <a> 



Attribut 


Valeurs 


Role 


href 


Ur\L 


Cible du lien. 


hreflang 


code de langue 


Langage de base de la cible du lien. 


medi a 
nouveau 


media query 


Specifie une requete de media pour laquelle la cible est opti- 
mises (voir I'annexe B en ligne sur les feuilles de style CSS). 


rel 


alternate, archives, 
author, bookmark, 
external, first, help, 
index, last, license, 
nextnofollow, 
noreferrer, prefetch 
prev, search, sidebar, 
tag, up 


Specifie la relation etablie par le lien, entre le document cou- 
rant et la cible. Plusieurs valeurs peuvent etre combinees, 
separees par des espaces. 

(Ne sont pas autorises contrairement a <1 i nk> : i con, 
pi ngback, styl esheet) 


target 


_blank, _parent, 
_self, _top 
nom d'un element de type 
iframe (attribut name) 


Attribue un contexte de navigation dans lequel suivre le lien. 


type 
nouveau 


type MIME 


Le type MIME de la destination du lien. 


download 
nouveau 


nom du fichier apres telechar- 
gement ou (vide) 


Indique que la ressource liee est prevue pour etre telechar- 
gee. Si une valeur est donnee a I'attribut, elle represente le 
nom du fichier apres telechargement. 



href et hreflang 

L' attribut href est bien sur le plus important puisque c'est lui qui determine la cible 
du lien, c'est-a-dire l'adresse du document que le navigateur chargera et interpretera. 
II peut s'agir d'un lien classique vers une autre page HTML, vers un fichier media 
que le navigateur peut interpreter nativement ou a l'aide d'une extension (par 
exemple une image, un document PDF), ou encore vers un fichier que le navigateur 
proposera de telecharger. 
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<!-- Lien vers une autre page html --> 
<a href="contact . html ">Contactez-nous</a> 

<!-- Lien vers une image --> 

<a href="maphoto . jpg">Admi rez ma photo</a> 

Le lien peut etre absolu, c'est-a-dire formuler une adresse complete, notamment dans 
le cas d'un lien menant vers un autre site heberge sur un autre nom de domaine. II 
peut etre aussi relatif, si Ton souhaite se baser sur l'adresse courante - affichee dans la 
barre d'adresses - et faire reference a un document stocke au meme niveau, ou dans 
un niveau different (sous-repertoire, repertoire parent, repertoire racine). 

<!-- Lien relatif vers une page de contact, hebergee dans le meme niveau 
d ' arborescence --> 

<a href="contact . html ">Contactez-nous</a> 

<!-- Lien relatif vers un fichier dans le sous-repertoire images (par 
rapport au document courant) --> 

<a href="images/schema. png">Voi r 1 ' i 1 1 ustrati on</a> 

<!-- Lien relatif vers une page hebergee dans le repertoire parent (un 

niveau au-dessus du document courant) --> 

<a href=" . . /categori e . html ">Reveni r a la categori e</a> 

<!-- Lien absolu vers une page hebergee a la racine du site --> 
<a href="/fientions . html ">Mentions legales</a> 

<!-- Lien absolu vers la racine du site --> 
<a href="/">Accuei 1 du site</a> 

Dans tous les cas, s'il ne s'agit pas d'un lien relatif au site, on precisera le protocole 
(http://, ftp://, etc.) 

<!-- Lien externe ou absolu --> 
<a href="http : //www. bl up . f r/"x/a> 

. . . ou bien mai 1 to : pour une adresse e-mail. II incombera au navigateur et au sys- 
teme d'exploitation de lancer l'application de messagerie installee pour prendre en 
charge ce lien et proposer une fenetre de redaction. 

<!-- Lien pour adresse e-mail --> 
<a h ref ="mai 1 to : j ames@bond . com"x/a> 

L'attribut hreflang precise la langue de destination et peut permettre a l'utilisateur 
de savoir par avance s'il pourra comprendre l'idiome utilise. 
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Exemple d'usage de I'attribut hreflang 

<!-- Lien vers la version de Wikipedia en langue anglaise --> 
<a href="http : //en .wi ki pedi a. org" href 1 ang="en">Wi ki pedi a</a> 

Par defaut, il n'est pas signale visuellement, mais une petite astuce en CSS permet 
d'afficher sa valeur entre parentheses a la suite du lien, grace a la pseudo- 
classe :after. 

Afficher la valeur d'hreflang apres un lien avec CSS 

a[hrefl ang] : after { 

content: " (" attr(hreflang) ") "; 

} 

rel 

Les relations des liens vers les autres ressources sont exprimees par I'attribut rel . 
Exemple de navigation sous forme de fil d'Ariane avec relations 

<nav> 
<P> 

<a href="/" rel="index up up">Accuei 1 </a> > 

<a href="/categorie/" rel="up">Ni veau superi eur</a> > 

Page courante 

</p> 
</nav> 

Pour une description precise des roles joues par chacune des valeurs possibles de 
I'attribut rel, reportez-vous en fin de chapitre a la section « Relations des liens ». 

id et ancres 

L'attribut name est desormais obsolete avec HTML 5 et doit etre remplace par i d 
pour nommer l'ancre, comme pour tous les autres elements. 

Une ancre, aussi nommee hash en anglais, permet d'affiner l'ecriture d'un lien pour 
cibler directement une portion de document (par exemple div, section) designee par 
son identifiant unique id. Elle figure dans l'URL a la fin de l'adresse du document, 
concatenee a celui-ci par un signe diese « # ». 

L' agent utilisateur sera charge d'acceder directement a l'element designe par cet i d, 
ce qui se traduit par un defilement automatique vers la portion concernee dans les 
navigateurs graphiques (si le document est assez long pour engendrer un defilement 
vertical ou horizontal dans la zone d'affichage). 
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La cible peut se situer sur le document courant : 
<!-- Lien vers 1'ancre #contact --> 

<a href="#contact">Accedez di rectement au formulaire de contact</a> 

Ou bien a une autre adresse : 
<!-- Lien vers 1'ancre #contact --> 

<a href="mentions . html#contact">Accedez di rectement au formulaire de 
contact</a> 

Une ancre sans nom designe le haut de la page : 

<!-- Lien vers le debut du document --> 
<a href="#">Haut de page</a> 

target 

L'attribut target quant a lui, etait deprecie dans la precedents version de HTML, 
mais fait un retour en force, car particulierement utile pour l'element i frame. II peut 
prendre les valeurs suivantes : 

• _blank : initialise un nouveau contexte de navigation (dans la plupart des cas, 
l'agent utilisateur ouvre une nouvelle fenetre ou un nouvel onglet). 

• _parent : le lien est suivi dans le contexte parent de l'element i frame qui contient le 
lien, ou dans le contexte courant s'il n'est pas contenu dans un document imbrique. 

• _sel f : le lien est suivi dans le contexte courant (par exemple l'i frame) ce qui corres- 
pond au comportement par defaut et ne necessite normalement pas d'etre precise. 

• _top : le lien est suivi dans le contexte de plus haut niveau remplacant tout eventuel 
contexte parent. 

• Ou bien le nom (valeur de l'attribut name) d'un element i frame present sur la page. 

Dans les precedentes versions de HTML, on limitait le contenu autorise d'un lien a 
du texte, des images et divers types de balises en ligne. II n' etait pas tolere de placer 
un bloc <hl> ou un paragraphe <p>. 



Tableau 4-21 Proprietes de l'element <a> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de flux et de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de flux ou de phrase. 


Interdictions 


Ne doit pas etre enfant d'un autre element a ni d'un element button. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 
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Tableau 4-21 Proprietes de I'element <a> (suite) 



Propriete 

Style par defaut 




Details 




a: link, a: visited { 
color: valeur interne; 
text-decoration: underline; 
cursor: auto; 



} 



a: link: active, a: visited: active { 
color: valeur interne; 



} 



download 

Ce nouvel attribut est prevu pour les nombreux liens menant vers des fichiers a tele- 
charger. II effectue done la distinction entre une ressource disponible pour la naviga- 
tion (une autre page HTML) et une ressource destinee a etre telechargee pour un 
usage ulterieur (un programme, un document dans un format binaire, etc.). 

<a href="/tel echarger . php" download="Installation.exe">Telecharger la 
version d ' i nstal 1 ati on</a> 

Sa valeur peut contenir une suggestion sur le nom du fichier a sauvegarder, qui peut 
etre different de celui stocke sur le serveur. Cette fonction est particulierement utile 
lorsqu'un script genere le fichier dynamiquement et que le navigateur ne parvient pas 
a en determiner la bonne extension. Toutefois, cette valeur peut etre redefinie par 
l'en-tete HTTP Content-Disposition et son parametre filename. 

<?php 

header ("Content-Di sposi ti on : attachment ; f i 1 ename=Instal 1 ati on . exe") ; 
header ("Content-Type : appl i cati on/octet stream") ; 
header("Content-Length : 1337") ; 

?> 

La prise en charge de l'attribut download reste modeste et n'est attendue qua partir 
de Chrome 14. 

Liens et blocs 

A partir de HTML 5, un lien peut contenir des balises de niveau bloc, cela s'avere utile 
lorsqu'une portion de document est constituee d'elements varies (par exemple un titre, 
une illustration, un court extrait de texte) devant tous mener a la meme ressource. Aupa- 
ravant, un lien ne pouvait englober de tels elements, car etant lui-meme de type en ligne. 
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Avant HTML 5 

<h3xa href="article-1337.html">Kiwi Party, le programme off i ci el </a></ 
h3> 

<pxa href="article-1337.html"ximg src="kiwiparty.png" alt=""> 
Connai ssez-vous beaucoup de sessions de conferences web gratuites, ou 
l'on peut assister a des presentations de qualite, exposees par des 
orateurs experts, suivies d'une soiree dans un bar, et le tout dans une 
ambiance detendue ?</ax/p> 

<pxa href="article-1337 . html ">Li re la suite</ax/p> 

Cela permet d'accroitre la surface cliquable, et d'eviter la duplication inutile de liens 
menant vers une meme adresse, soit une bonne pratique de plus pour l'accessibilite. 

Avec HTML 5 et les liens de niveau bloc 

<a href="article-1337.html"> 

<h3>Kiwi Party, le programme officiel</h3> 

<pximg src="kiwi party . png" alt=""> Connai ssez-vous beaucoup de 
sessions de conferences web gratuites, ou l'on peut assister a des 
presentations de qualite, exposees par des orateurs experts, suivies 
d'une soiree dans un bar, et le tout dans une ambiance detendue ?</p> 

<p>Li re la suite</p> 
</a> 

Cette technique est « quasiment » retrocompatible puisque les navigateurs Font 
toleree avec HTML 4 et XHTML 1.0, n'ayant eu aucune raison de l'interdire. Un 
bogue subsiste neanmoins avec le moteur de rendu Gecko de Mozilla jusqu'a 
Firefox 3.6 si l'on place un nouvel element structurel HTML 5 (par exemple 
section, hgroup, etc.) directement en tant que premier enfant d'un tel lien. Lanaly- 
seur syntaxique clot prematurement le bloc. Cela peut etre resolu en emballant ce 
meme contenu dans un element plus classique tel que <di v>. 



Sections et titres 

Les sections delimitent les zones du document possedant une valeur semantique par- 
ticuliere. Contrairement a <div> et <span> qui n'ont aucun role particulier, hormis 
celui de regrouper des elements, chaque section possede un role precis, et peut etre 
utilisee une a plusieurs fois dans le document. A l'exception de <address> qui est 
presente ulterieurement, il s'agit de nouveautes HTML 5. 
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Tableau 4-22 Nouveaux elements de section HTML 5 



Norn Details 


section 


Section generique, regroupant une meme thematique de contenu, de preference avec 
un en-tete. 


article 


Section de contenu dans un document ou une application web, dont la composition peut etre 
independante du reste de la page et extraite individuellement. 


nav 


Section abritant des liens de navigation majeurs, permettant de naviguer au sein du document 
ou vers d'autres pages. 


aside 


Section dont le contenu est tangentiellement lie a ce qui I'entoure, et qui peut etre considered 
comme separe de ce contenu. 


header 


Section d'introduction (d'un document, d'une autre section, d'un article) pouvant contenir - selon 
le contexte - titres, navigation, formulaire de recherche, table des matieres, logo, etc. 


footer 


Pied de page, de section ou d'article - selon son plus proche ancetre - pouvant contenir des 
informations connexes et une navigation annexe. 



Ces balises repondent a des besoins precis de structuration du document. Jusqu'a 
HTML 5, l'element <div> est le bloc le plus generique qui soit, et surexploite pour 
decouper les differentes zones d'une page web. On lui adjoint des attributs id ou 
class avec des noms plus ou moins evocateurs pour distinguer celui qui contient la 
navigation de celui qui contient le pied de page ou de celui qui contient les informa- 
tions contextuelles, et ainsi de suite pour chacun des groupes d'elements. 

Code probable pour HTML 4 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http : //www. w3 . org/TR/html 4/stri ct . dtd"> 
<html > 
<head> 

<title>Ma structure complete en HTML 4</title> 

<meta http-equi v="Content-Type" content="text/html ; charset=utf-8"> 
</head> 
<body> 

<!-- Debut --> 
<div id="header"> 

<div id="nav"x/div> 
</di v> 

<div i d="content"> 

<div cl ass="arti cl e"x/di v> 

<div cl ass="arti cl e"x/di v> 

<div cl ass="arti cl e"x/di v> 
</di v> 

<div id="aside"x/div> 
<div id="footer"x/div> 
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<!-- Fin --> 

</body> 
</htm"l> 



Figure 4-6 

Structure imaginaire 
d'un document HTML 
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La popularite de <di v> provient de sa neutralite semantique a l'echelle du document, 
et par l'absence de style par defaut. C'est un element de structure « a tout faire ». 
Cependant, cette neutralite est aussi un inconvenient majeur d'un point de vue 
semantique : il n'est pas possible pour un agent utilisateur de distinguer les usages qui 
sont faits de cette decoupe, car il n'existe aucune convention de nommage des attri- 
buts, ni aucune recommandation pour l'appliquer. Un robot pourra difficilement dis- 
tinguer un element <div> contenant les principaux liens de navigation du site, d'une 
liste de ressources externes figurant dans un article de blog. 

HTML 5 introduit en quelque sorte les « div specialises », possedant chacun une 
vocation propre et un sens. Par chance - ou clairvoyance du HTML Working 
Group - leur nom est suffisamment explicite pour se les approprier rapidement. En 
suivant l'exemple precedent, l'adaptation d'une structure globale avec les nouveaux 
elements HTML 5 pourrait ressembler a ceci : 
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Code probable pour HTML 5 



<!doctype html> 
<html lang="fr"> 
<head> 

<title>Ma structure complete en HTML5</title> 

<meta charset="utf-8"> 
</head> 
<body> 

<!-- Debut --> 
<header> 

<navx/nav> 
</header> 
<section> 

<arti cl ex/arti cl e> 

<arti cl ex/arti cl e> 

<arti cl ex/arti cl e> 
</section> 
<asi dex/asi de> 
<f oote rx/f oote r> 
<!-- Fin --> 

</body> 
</htm"l> 



Figure 4-7 

Structure imaginaire 
d'un document HTML 5 
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92 



4 - Elements et attributs HTML 5 



Les avantages sont evidents : le code source est plus clair, les differentes parties com- 
posant un document sont clairement identifiees. En accroissant la valeur semantique, 
on augmente aussi les possibilites d'analyse du contenu et de referencement. 



Le cas Internet Explorer 

Ces nouveaux elements se calquent sur les proprietes de style de <di v>, c'est-a-dire un 
affichage en bloc par defaut, sans autre artifice, ce qui convient tout a fait a leur vocation. 

C'est en revanche un inconvenient de taille pour Internet Explorer jusqu'a sa version 8 qui 
ne reconnait aucun d'entre eux, ne les considere pas comme des elements (qu'ils soient de 
type bloc ou non), et ne permet meme pas de leur affecter une quelconque propriete de 
style pour leur conferer un aspect de bloc. De ce fait, une page structuree avec leur con- 
cours risque d'etre degradee a l'affichage pour Internet Explorer en deca de la version 9. 

Zoom sur un test des elements de section HTML 5 avec IE8 

<header>header 

<nav>nav</nav> 
</header> 
<secti on>secti on 

<arti cl e>arti cl e</arti cl e> 

<arti cl e>arti cl e</arti cl e> 

<arti cl e>arti cl e</arti cl e> 
</secti on> 

<asi de>asi de</asi de> 
<f oote r>f oote r</f oote r> 



Figure 4-8 

Apparence par defaut 
sur Internet Explorer 8 



^ Sections HTTML5 - Windows Internet Explorer 



U Sections HTML5 




header nav section article article article aside footer 



!■ Ordinateur | Mode protege : desartive 



Des astuces existent cependant pour pallier ce manque. Premierement, avec JavaS- 
cript et lafonction document. createElement qui, placee dans <head>, declare un ele- 
ment au prealable et permet de I'inserer de maniere correcte dans le DOM pour pou- 
voir le « styler ». Sans cela, toute occurrence d'un element inconnu est ajoutee en tant 
que descendant, sans enfant, de l'element <body>. 



93 



5 - Une reference pour le developpement web 



Declaration d'elements HTML 5 en JavaScript pour Internet Explorer <9 

<scri pt> 

document . createEl ement(" header") ; 
document .createEl ement ("footer") ; 
document .createEl ement ("secti on") ; 
document .createEl ement ("asi de") ; 
document .createEl ement ("nav") ; 
document . createEl ement ("arti cl e") ; 
document .createEl ement ("fi gure") ; 
document .createEl ement ("fi gcaption") ; 
document .createEl ement ("hg roup") ; 
document . createEl ement ("time") ; 
</script> 

Placees dans un fichier externe, ces instructions peuvent etre appelees specifique- 
ment pour les navigateurs Internet Explorer inferieurs a la version 9 avec un com- 
mentaire conditionnel : 

Inclusion depuis un fichier JavaScript externe nomme html5ie.js 

<!--[if It IE 9]><script src="html 5i e . js"x/scri ptx ! [endi f ] --> 

L'appel doit se faire avant toute utilisation des elements en question, soit dans la 
partie <head> du document. Cette astuce est exploitee au mieux par le script 
html5shim (ou html5shiv) qui regroupe d'autres petites ameliorations pratiques, et 
qui est disponible depuis Google Code : 

Inclusion de html5shim depuis Google Code 

<! — [if It IE 9]> 

<scri pt src="http : //html 5 shim . googl ecode . com/svn/trunk/html 5 . js"> 

</script> 

< ! [endi f ] --> 

II faudra adjoindre les declarations de style souhaitees pour ces elements, soit : 

Style CSS par defaut des principaux elements de section HTML 5 

header, section, article, nav, footer, aside, menu, hgroup, figure, 
fi gcaption { 
display:block; 

} 

L'exemple suivant regroupe toutes ces recommandations ainsi que trois proprietes de 
style complementaires (border, margi n, paddi ng) pour mieux visualiser 1'imbrication. 
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Exemple complet avec blocs styles pour Internet Explorer <9 

<!doctype html> 
<body lang="fr"> 
<head> 

<title>Test medieval </title> 
<meta charset="utf-8"> 

<styl e> 

header, section, article, nav, footer, aside, hgroup { 
displ ay : block; 

border:2px dashed #aaa; 
margi n : 3px ; 
paddi ng : 3px; 

} 

</styl e> 

<!--[if It IE 9]> 

<script src="http://html 5shim . googl ecode.com/svn/trunk/html 5 . js"> 
</script> 
<! [endif]--> 

</head> 

<header>header 

<nav>nav</nav> 
</header> 
<secti on>section 

<arti cl e>arti cl e</arti cl e> 

<arti cl e>arti cl e</arti cl e> 

<arti cl e>arti cl e</arti cl e> 
</section> 

<asi de>asi de</asi de> 
<f oote r>f oote r</f oote r> 



</html> 



Figure 4-9 
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Le cas Internet Explorer sans JavaScript 

Une deuxieme alternative existe, via l'utilisation d'espaces de noms (ou namespaces) 
HTML. Ce principe permet de placer les elements HTML 5 dans leur propre 
namespace. Dans cette optique, l'attribut xmlns est sollicite sur la racine html. 
Lensemble permet aussi d'affecter des proprietes de style, avec l'inconvenient majeur 
cependant de devoir faire appel a une syntaxe XML plus lourde et plus contrai- 
gnante, comme nous l'avons vu en debut d'ouvrage. De plus, un document HTML 5 
- et non XHTML 5 - ne sera pas formellement valide s'il exploite cette astuce. 

Exemple de I'element section dans I'espace de noms html5 

<!DOCTYPE html> 

<html xml ns="http : //www. w3 . org/1999/xhtml " xml ns : html 5="http:// 
www . w3 . org/1999/xhtml "> 

<head> 

<ti tl e>Namespace HTML5 pour IE</title> 
<styl e> 

html 5\: section { 

display:block; 

} 

</style> 
</head> 
<body> 

<html 5 : section> 

<!-- Contenu de la section... --> 
</html 5 : section> 

</body> 
</html> 

Au niveau de la feuille de style, un selecteur approprie doit etre utilise, en echappant 
les deux-points avec un antislash. Lechappement consiste a inserer un caractere en 
amont pour eviter la mauvaise interpretation du signe suivant. 

Propriete CSS relative a section dans I'espace de noms html5 

html 5\: section { 
display:block; 

} 



Ressources Sections HTML 5 dans Internet Explorer sans JavaScript 

HTML5 elements in Internet Explorer without Javascript, par Elco Klingen 

► http://www.debeterevormgever.nl/html5-ie-without-javascript/ 
Une ancienne experimentation de Dean Edwards sur I'element abbr 

► http://dean.edwards.name/my/abbr-cadabra.html 
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Le cas Internet Explorer sans JavaScript, bis 

La troisieme astuce se limite a Internet Explorer dans sa version 8. La syntaxe glo- 
bale est moins contraignante puisque cette fois le namespace peut etre attribue a un 
ancetre commun, via un commentaire conditionnel, ce qui le rend inoffensif pour 
tous les autres navigateurs. Le principe se fonde sur la possibilite d'appliquer une 
classe de style, une fois I' element « reconnu » par cette astuce. 

Utilisation d'un namespace specifique pour IE8 

<!DOCTYPE html> 

<html> 

<head> 

<ti tl e>Namespace pour IE8</title> 
<style> 

.section, .article { 
display: block; 

} 

</styl e> 

</head> 

<body> 

<!--[if IE 8]><ie xml ns="html 5"><! [endif]--> 
<section cl ass="section"> 

<!-- Contenu de la section... --> 
</section> 

<article class="article"> 

<!-- Contenu de 1' article... --> 
</arti cl e> 

<!--[if IE 8]></ie><! [endif]--> 
</body> 
</html> 

Linconvenient evident est celui de l'absence totale de support pour les versions plus 
anciennes. Labandon des versions medievales d'Internet Explorer est veritablement 
le Saint Graal des developpeurs HTML 5. 

Ressources Sections HTML 5 dans Internet Explorer sans JavaScript 

Une experimentation suivant une autre piste pour Internet Explorer 8 
► http://www.webstack.co.uk/html5_without_javascript_ie8/ 



<section> nouveau 

Element fondamental de la nouvelle approche de decoupe semantique des docu- 
ments, <section> regroupe un contenu relatif a une meme thematique. II peut etre 
introduit par des elements de titraille (<header>, <hgroup>, <hl> a <h6>, etc.). 
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Ses cas d'utilisation sont multiples, cependant il ne faut pas le surexploiter : ce nest 
pas un remplacant de <div> en HTML 5, mais bien un element specialise. On peut 
l'envisager pour scinder un document en plusieurs chapitres, pour decouper un con- 
tenu presente dans differents onglets ou differentes vues, voire pour delimiter les the- 
matiques d'un element <arti cl e>. 

II faut l'eviter si l'objectif est uniquement de l'utiliser pour affecter un style ou appli- 
quer un script ; si d'autres elements sont plus appropries (particulierement 
<article>, <aside>, <nav>, <header>, <footer> et <div> en dernier recours). 

Exemple d'usage de <section> englobant des articles 

<section> 

<hl>Arti cl es</hl> 

<arti cl e> 

<h2>T"itre de 1 ' arti cl e</h2> 

<p>Contenu de 1 ' arti cl e</p> 
</arti cl e> 

<arti cl e> 

<h2>T"itre de 1 ' arti cl e</h2> 

<p>Contenu de 1 ' arti cl e</p> 
</arti cl e> 

<arti cl e> 

<h2>Titre de 1 ' arti cl e</h2> 

<p>Contenu de 1 ' arti cl e</p> 
</arti cl e> 

</section> 

Dans ce cas de figure, l'element <section> regroupe un ensemble d'articles. 

Exemple d'usage de <section> dans un article 

<arti cl e> 

<hl>Les couleurs</hl> 

<p>Ce sont des perceptions visuelles subjectives dependant de la 
frequence des ondes 1 umi neuses . </p> 

<section> 

<h2>Le rouge</h2> 

<p>Couleur primaire, le rouge excite le plus l'oeil humain apres le 
jaune.</p> 
</section> 
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<section> 

<h2>Le vert</h2> 

<p>Menthe a l'eau ou grenouille, le vert est souvent associe a la 
nature . </p> 
</section> 

</arti cl e> 

Dans cet autre exemple, l'element <section> joue le role de division thematique dans 
un meme article. 

II est important de noter que quel que soit son usage, <section> est un bloc de contenu 
appartenant a une meme thematique, tandis que <di v> est uniquement un bloc de con- 
tenu sans relation particuliere. Arbitrer en faveur de l'un ou l'autre nest pas tres com- 
plique, il suffit de determiner si une certaine coherence repondant a une logique seman- 
tique est respectee - par exemple si Ton peut les reunir sous le meme titre - ou bien si leur 
regroupement est un hasard dans la succession des elements, dans la mise en pages. 

En revanche, si le contenu peut etre dissocie du document, voire lu de maniere inde- 
pendante dans un agregateur de flux (RSS, Atom), l'element <article> est tout 
indique. II s'agit justement du prochain element aborde. 



Propriete 



Tableau 4-23 Proprietes de l'element <section> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs elements <styl e>, suivis de contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux, sauf <address>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


section { 

display: block; 

} 



<article> <nouveau> 

L'element <article> est une specialisation de <section>. II possede une plus forte 
valeur semantique, et pour cela il faut le considerer comme une portion de document 
qui se suffit a elle-meme, par exemple une entree distincte parmi d'autres. On peut 
extraire son contenu, eventuellement le syndiquer, sans que celui-ci perde son sens. 

Bien sur, il ne faut pas s'arreter simplement au terme « article », bien que cette desi- 
gnation puisse representer la plupart des cas d'utilisation sur un reseau vehiculant en 
majorite des « articles » de presse, des « articles » de blogs, de sites d'actualites ou 
d'outils varies de publication en ligne. Une partie quasi independante d'un document 
peut aussi consister en une intervention d'un membre sur un forum, ou un commen- 
taire ecrit par un visiteur sur un blog. 
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Exemple d'usage de <article> 

<article> 

<hl>Titre de 1 ' arti cl e</hl> 
<p>Contenu de 1 'article. . .</p> 
</articl e> 

Etant donne le caractere souhaite autonome de cet element vis-a-vis de ce qui 
l'entoure, il est tout a fait possible d'utiliser une balise <header> pour l'introduire et 
<footer> pour lui affecter un « pied d'article », voire de le decouper en plusieurs par- 
ties via <section>. 



Exemple d'usage de <article> avance 

<article> 

<header> 

<hl>Titre de 1 ' arti cl e</hl> 

<p>Publ i cati on le <time datetime="2011-02-03" pubdate>leudi 3 
fevrier 2011 par George Abitbol</p> 
</header> 

<p>Contenu de 1 'article, premier paragraphe . </p> 
<p>Contenu de 1 'article, deuxieme paragraphe. </p> 
<footer><!-- Pied de 1 'article --></footer> 
</articl e> 

Dans cet exemple, l'element <time> est muni de l'attribut pubdate, qui revet une 
importance particuliere specifiquement dans le cadre d'un conteneur tel 
qu'<article> : sa signification correspond alors a la date de publication de 
l'ensemble de l'article. Cette particularite n'est pas valable pour <section>, ce qui 
caracterise bien la difference semantique existant entre ces deux elements cousins. 



Propriete 



Tableau 4-24 Propriet.es de l'element <article> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs elements <styl e>, suivis de contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux, sauf <address>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


article { 

display: block; 

} 



<hcadcr> nouveau 

Comme son nom le suggere, <header> correspond a un en-tete de section. II peut 
s'agir de l'en-tete general du document <body>, s'il est place de telle sorte dans la hie- 
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rarchie qu'il ne dispose pas d'ancetre de section. II peut alternativement etre utilise en 
debut de <section> ou <article> le cas echeant, et done contenir : 

• des informations d'introduction (titres <hl> a <h6>, paragraphes, meta-informa- 
tions, etc.) ; 

• une navigation (<nav>, <form>, <a>, etc.) pour cette sous-partie de document ; 

• une table des matieres pour I'ancetre <section> ou <article> qui le contient. 
Son usage n est done pas limite a une seule occurrence par page. 

Exemple d'usage commun de <header> 

<body> 
<header> 

<img src="logo. png" alt="" /> 
<hl>Titre pri nci pal </hl> 
<nav> 
<ul> 

<1 i ><a h ref ="/">Accuei 1 </ax/l i > 
<1 ixa href="/contact">Contact</ax/l i> 
<lixa href="/a-propos">A propos</ax/l i> 
</ul> 
</nav> 
</header> 

<!-- Contenu du document... --> 
</body> 

De par sa nature, un element <header> ne peut etre contenu dans <footer>, 
<address> ou <header> lui-meme. Son usage n'implique pas obligatoirement la pre- 
sence de <footer>. 

Exemple d'usage de <header> dans <article> 

<article> 
<header> 

<hl>Titre de 1 'article</hl> 

<p>Publ i cati on le <time datetime="2011-02-03" pubdate>Jeudi 3 
fevrier 2011 par George Abitbol</p> 
</header> 

<p>Contenu de 1 ' arti cl e</p> 
<footerx!-- Pied de 1 'article --></footer> 
</arti cl e> 

Dans cet exemple, <header> regroupe les elements pouvant etre consideres comme 
elements d'en-tete pour la section <article>, a savoir le titre et les meta-informa- 
tions relatives, telles que la date ou l'auteur. 
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Propriete 



Tableau 4-25 Proprietes de I'element <header> 
Details 



Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux, sauf <address>, 
<footer> et <header>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


header { 

display: block; 

} 



<footcr> nouveau 

Le pendant de <header> pour le pied de page est <footer>. II s'agit egalement d'un ele- 
ment specialise possedant une valeur semantique, visant a contenir les informations que 
Ton peut habituellement placer en fin de section, telles que des mentions legales, des 
informations de contact ou les sources d'une actualite, et eventuellement une navigation. 
Ce contenu se rapporte au plus proche ancetre de section, c'est-a-dire le document dans 
son ensemble s'il n'en possede pas, ou bien son parent de type <arti cl e> ou <secti on>. 

Exemple d'usage commun de <footer> 

<body> 

<!-- Contenu du document... --> 
<footer> 

<p>Tous droits reserves</p> 

<nav> 
<ul> 

<lixa href="/">Retour a 1 'accueil</ax/li> 
<1 i ><a h ref ="/contact ">Contact</ax/l i > 
<lixa href="/plan">Plan du site</ax/li> 
</ul> 
</nav> 
</footer> 
</body> 

De par sa nature, un element <footer> ne peut etre contenu dans <header>, 
<address> ou <footer> lui-meme. Son usage n'implique pas obligatoirement la pre- 
sence d'un element <header>. 



Exemple d'usage de <footer> dans <article> 

<arti cl e> 

<header><!-- En-tete de 1 'article --x/header> 

<p>Contenu de 1 ' arti cl e . . . </p> 

<footer> 
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<p>Tags :HTML5, structure, footer</p> 

<p>Categorie : <a href="/el ements">El ements HTML5</ax/p> 
</footer> 
</arti cl e> 

Dans cet exemple, l'objectif est de regrouper toutes les informations complemen- 
taires au contenu propre de l'article, dont la nature peut etre extremement variee 
selon le modele d'organisation du site. On peut y retrouver tant des meta-informa- 
tions connexes que des liens, ou des fonctions de partage sur les reseaux sociaux. De 
ce fait, il peut exister plusieurs elements <footer> dans un meme document HTML. 



Propriete 



Tableau 4-26 Proprietes de I'element <footer> 
Details 



Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux, sauf <address>, 
<footer> et <header>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


footer { 

display: block; 

} 



<nav> nouveau 

Les niveaux de navigation peuvent etre multiples sur un site web ou une application. 
II peut s'agir de liens portant sur l'integralite du site, sur une sous-partie de l'arbores- 
cence en particulier, vers des pages communes et transversales, ou bien encore vers 
des sections du meme document. 

Lelement <nav> est un choix de predilection pour la navigation principale (souvent 
dans <header>) et eventuellement pour les navigations annexes de moindre valeur 
(souvent dans <footer>). 

II peut egalement aider les robots d'indexation a dresser une carte de l'epine dorsale de 
l'arborescence, mais il n'est pas necessaire de l'utiliser pour toutes les listes de liens. 

Exemple d'usage de I'element <nav> 

<nav> 
<ul> 

<1 ixa href="/accuei 1 ">Accuei 1 </ax/l i> 
<1 i ><a h ref ="/art"i cl es">Arti cl es</ ax/1 "i > 
<lixa href="/archi ves">Archi ves</ax/li> 
<1 i xa h ref ="/con tact ">Contact</ax/l i > 
</ul> 
</nav> 
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Les lecteurs d'ecrans et autres syntheses vocales ne seront pas prompts a implementer 
Faeces direct a ce nouvel element de navigation. C'est pourquoi les liens d'evitement 
sont encore tout a fait conseilles en parallele de <nav>. 



Tableau 4-27 Propriet.es de I'element <nav> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux, sauf <address>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


nav { 

display: block; 

} 



<aside> <nouveau> 

Une page web est bien souvent dotee d'un contenu principal et d'informations con- 
nexes qui ne sont pas essentielles a sa comprehension. On parle alors de contenu tan- 
gentiel, et I'element <aside> est destine a l'abriter. II ne s'agit pas simplement de le 
considerer comme une section vouee a etre rendue graphiquement a gauche ou a 
droite du contenu principal, mais bien d'un point de vue semantique comme une sec- 
tion possedant une substance peripherique ou ampliative. 

On peut considerer comme repondant a ces criteres : une definition d'un des termes 
utilises dans le contenu, une biographie, un glossaire, une chronologie apportant un 
fond historique, voire d'autres eclaircissements, astuces et notes qui n'ont de limite 
que l'imagination. 

Exemple d'usage global de <aside> 

<body> 

<!-- Contenu du document... --> 
<aside> 

<h2>Cesti on</h2> 

<ul> 

<1 ixa href="/pani er">Pani er</ax/l i> 
<1 ixa href="/commandes">Commandes</ax/l i> 
<1 ixa href="/sui vi ">Sui vi </ax/l i> 
</ul> 

<h2>Cl ossai re</h2> 
<dl> 

<dt>CSS</dt> 

<dd>Cascadi ng Style Sheets</dd> 
<dt>HTML</dt> 

<dd>HyperText Markup Language</dd> 
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</dl> 
</aside> 

</body> 

Dans un <arti cl e>, <asi de> joue le meme role, mais avec une influence locale, c'est- 
a-dire tangentielle au contenu de l'article. Au regard de la valeur semantique, son 
contenu possede une influence moins forte que celui de l'article parent. 

II peut aussi s'agir d'une citation du contenu qui doit etre mise en valeur d'une 
maniere particuliere, une remarque qui doit etre lue entre parentheses, ou d'un texte 
qui sort tout simplement du flot narratif principal. 

Exemple d'usage de <aside> dans <article> 

<arti cl e> 
<header> 

<!-- En-tete d'article --> 
</header> 

<p>Contenu de 1 ' arti cl e . . . </p> 
<aside> 

<p>Ressources compl ementai res :</p> 



<1 ixa href="http : //www. whatwg . org/specs/web-apps/cur rent -work/ 
multipage/sections.html#the-aside-element">L'element aside dans la 
specification du WhatWC</ax/li> 

<1 ixa href="http : //dev . w3 .org/html 5/markup/asi de . html ">L ' el ement 
aside dans la specification du W3C</ax/li> 
</ul> 
</aside> 
<footer> 

<! — Pied d'article --> 
</footer> 
</arti cl e> 

Dans cet exemple, <aside> regroupe des liens de navigation vers des lectures addi- 
tionnelles. 



<ul> 




Parents autorises 



Tout element pouvant contenir des elements de flux, sauf <address>. 



Omission de balise 



Balises ouvrante et fermante obligatoires. 



Style par defaut 



aside { 



display: block; 

} 
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<address> 



Un bloc contenant des informations de contact peut etre realise grace a l'element 
address. Celui-ci s'applique a son plus proche ancetre de type body ou article. Si 
l'element address est unique pour le document (dans body), alors il contient les 
informations de contact pour cet ensemble. Si Ton en retrouve plusieurs au sein 
d'elements de type article, alors ils contiennent les informations de contact rela- 
tives a l'auteur de l'article uniquement. 

Les informations peuvent correspondre aux noms des personnes a l'origine du docu- 
ment, a leurs adresses e-mail, de messagerie instantanee ou web, eventuellement 
leurs coordonnees telephoniques ou postales. Mais cet element n'est pas prevu pour 
englober une simple adresse postale qui ne representerait pas une information de 
contact vis-a-vis du contenu du document HTML. 

Exemple d'usage d'<address> 



<arti cl e> 

<p>Auteurs de cet article :</p> 
<address> 

<a href="http://www.goetter.f r/">Raphael Coetter</a>, 
<a href="http : //www . bl up . f r/">Moi -meme</a> 
</address> 
</arti cl e> 

Pour baliser un bloc d'adresse postale (ou mixte) quelconque, un microformat de type 
hCard sur un paragraphe est plus approprie. 



Propriete 



Tableau 4-29 Proprietes de l'element <address> 
Details 



Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux, sauf <address>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


address { 

display: block; 
font-style: italic; 

} 



<hl> a <h6> 



Les elements de type <hX> ou X represente un chiffre entre 1 et 6 correspondent a des 
titres {heading en anglais) de niveaux differents. <hl> est un titre de premier niveau, 
<h2> un titre de deuxieme niveau, et ainsi de suite jusqu'au petit dernier <h6>. 
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lis possedent une forte valeur semantique et doivent etre utilises la ou un titre de docu- 
ment ou de section est necessaire, car il ne suffit pas d'affecter des proprietes de style 
telles qu'une police enorme a un paragraphe <p> pour lui conferer la vocation d'un titre. 

Exemple d'une hierarchie de titres 

<body> 

<hl>Titre de niveau l</hl> 

<h2>Titre de niveau 2</h2> 

<h3>Titre de niveau 3</h3> 

<h4>Titre de niveau 4</h4> 

<h5>Titre de niveau 5</h5> 

<h6>Titre de niveau 6</h6> 
</body> 



Figure 4-10 

Rendu de differents 
niveaux de titres 

Titre de niveau 1 

Titre de niveau 2 

Titre tie niveau 3 




decerns ces titres 



i °|b »a» l 



' Abacreations fi) 



Bien qu'il ne soit pas invalide de sauter des niveaux (par exemple passer de <h2> a 
<h5>), cette pratique est fortement deconseillee par la specification HTML, car la 
conversion vers d'autres types de contenu ou la constitution d'une liste coherente de 
la hierarchie du document peuvent devenir problematiques. 

Les styles par defaut des titres suivent une meme trame. II s'agit de blocs possedant 
des marges de dimensions variables et des tailles de polices decroissantes selon 
l'importance du niveau du titre. 

Tableau 4-30 Proprietes de ces elements <h1 > a <h6> 



Propriete 


Details 




Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de flux, <hgroup>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 
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Tableau 4-30 Proprietes de ces elements <h1 > a <h6> (suite) 



Propriete 


Details 


Stvlp nar Hpfaut 

-J L y J t \J (A 1 UCIQU L 


hi f 




di spl ay : bl ock ; 




font-size: 2em; 




margi n : . 67em . 67em ; 




f ont-wei ght : bol d ; 




} 




h2 1 

ML. 1_ 




disnlav* block* 

u i j u i u y i u i \j li\ j 




font-size: 1.5etn; 




margin: .83em .83em 0; 




font-weight: bold; 




} 




h3 f 




display: block; 




font-si ze : 1 . 17em ; 




margi n : lem lem j 




f ont-wei ght : bol d ; 




\ 
j 




h4 1 




di spl ay : bl ock ; 




margi n : 1 . 3 3 em 1 . 3 3 em ; 




f ont-wei ght : bol d ; 




} 








display: block; 




font-size: .83etn; 




margin: 1.67em 1.67em 0; 




font-weight: bold; 




} 




h6 { 




display: block; 




font-size: .67em; 




margin: 2.33em 2.33em 0; 




font-weight: bold; 




} 



Hierarchie des elements de sections et outline 

Plusieurs elements <hX> de meme niveau peuvent se cotoyer. Contrairement a l'ele- 
ment <title>, il peut exister plusieurs titres de premier niveau <hl> dans une page, 
par exemple dans plusieurs sections. lis correspondent alors aux niveaux d'en-tetes de 
leurs sections respectives. C'est a partir de ce moment que l'apprivoisement se corse. 

Avec HTML 5 et l'introduction des elements delimitant des sections de document 
(section, aside, nav, article), il nest pas strictement necessaire de suivre une hie- 
rarchie de titres aussi simpliste et lineaire que dans l'exemple precedent. Une telle 
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organisation peut tout a fait etre transposed du document global a une section en 
particulier, et de ce fait <hl> pourra representer le titre principal d'un <arti cl e>, aux 
cotes d'autres confreres articles du meme acabit. 

Cela signifie qu'une page web peut etre amenee a comporter differentes sections ou 
articles, chacun dote de sa propre hierarchie de titres, debutant par <hl>. II s'agit 
alors d'un decoupage explicite. 

Si Ton devait dresser une table des matieres du document HTML, il faudrait se baser 
sur les titres structurant le document. Un tel exercice n'est pas purement theorique. II 
soutient directement l'exportation de donnees et leur interpretation, I'accessibilite et 
la navigabilite, les algorithmes permettant de synthetiser le contenu d'une page web, 
les extensions de navigateurs destinees a faire l'inventaire de la titraille. 

Cet algorithme est nomme outline dans la specification. II faut principalement le voir 
comme une liste numerotee et indentee des titres, telle qu'on peut en rencontrer pour 
le sommaire d'un livre. 

En HTML 4, le calcul est simple, il suffit de se fier a l'enchainement des titres <hl> a <h6>. 

Document HTML 4 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http : / /www. w3 . org/TR/html 4/stri ct . dtd"> 
<head> 

<title>Mon document HTML 4</title> 
</head> 
<body> 

<hl>Titre principal </hl> 

<p>. . .</p> 

<h2>Niveau 2</h2> 

<p>. . .</p> 

<h2>Niveau 2</h2> 

<p>. . .</p> 
<di v> 

<h3>Niveau 3</h3> 
<p>. . .</p> 
</di v> 

</body> 
</html> 

Outline en resultant 

1. Titre principal 
1. Niveau 2 
2. Niveau 2 
1. Niveau 3 
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En HTML 5, les sections <nav>, <article>, <aside> et <section> definissent les 
grands ensembles thematiques du document, d'apres leur ordre et leur imbrication, 
lis possedent des en-tetes et titres respectifs qui doivent etre pris en compte par 
l'outline, parmi lesquels <hgroup> et <hl> a <h6>. Des lors, l'algorithme est defini par 
plusieurs grands principes : 

• II faut considerer le premier en-tete de chaque section comme titre de cette meme 
section. 

• Tous les eventuels autres titres - hormis ceux places de concert dans le premier 
<hgroup> s'il existe - creent des sections implicites. Sont concernes a cet effet tous 
les titres <hl> a <h6> non contenus dans <hgroup>, et chaque <hgroup>. 

• L' element <header> n'est pas concerne par cet algorithme, et n'affecte ni l'outline, 
ni la creation implicite de sections ou de titres. 

• Le decoupage explicite des portions par les elements de section precites y parti- 
cipe bien evidemment aussi. 

Document HTML 5 

<!doctype html> 
<html lang="fr"> 
<head> 

<meta charset="utf-8" /> 
<title>Mon document HTML5</ti tl e> 
</head> 
<body> 

<header> 

<hl>Titre principal</hl> 

<nav> 
<ul> 

<1 i ><a h ref ="/">Accuei 1 </ax/l i > 
<1 i ><a h ref ="/contact ">Contact</a></1 i > 
</ul> 
</nav> 
</header> 

<section> 

<hl>Section l</hl> 
<secti on> 

<hl>Section l.l</hl> 
<p> . . . <p> 
<section> 

<hl>Section l.l.l</hl> 
<p> . . . <p> 
</section> 
<section> 

<hl>Section 1.1.2</hl> 
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<header> 

<p>. . .</p> 
</header> 
<arti cl e> 

<hl>Titre de 1 ' articl e</hl> 
<h2>Titre de niveau 2</h2> 
</art"i cl e> 
</section> 
</section> 
</secti on> 

<secti on> 
<hgroup> 

<hl>Section 2</hl> 
<h2>Sous-titre</h2>< ! -- ignore --> 
</hgroup> 
<section> 

<hl>Section 2.1</hl> 
<p> . . . <p> 
</section> 
<section> 

<hl>Section 2.2</hl> 
<p> . . . <p> 
</section> 
</secti on> 

<asi de> 

<h2>Titre d'une zone lateral e</h2> 
<h3>Sous-titre d'une zone 1 ateral e</h3> 
</aside> 

</body> 
</html> 

Outline en resultant 

1. Titre principal 

1. Navigation sans titre 

2. Section 1 

1. Section 1.1 

1. Section 1.1.1 

2. Section 1.1.2 

1. Titre de 1 'article 
1. Titre de niveau 2 

3. Section 2 

1. Section 2.1 

2. Section 2.2 

4. Titre d'une zone laterale 

1. Sous-titre d'une zone laterale 
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Cet exemple n'est qu'une experimentation destinee a demontrer les differentes situa- 
tions evoquees, elle ne constitue pas une structure type de document. 

Les sections explicites autorisent le saut de niveaux de titres - par exemple, il est pos- 
sible de debuter un <article> par <hl>. Le choix du niveau initial est relativement 
libre, pour autant qu'il reste logique et harmonieux tout au long du document. II est 
envisageable d'utiliser tout niveau de titre, par exemple base sur l'attachement aux 
styles CSS, sans se preoccuper de sauter un ou plusieurs niveaux. Les exceptions peu- 
vent etre ecrites en tenant compte des titres contenus dans <hgroup> pour les sous- 
titres, ou avec des classes specifiques lorsque c'est necessaire. Toutefois, il faut tou- 
jours veiller a ne pas sauter de niveaux pour l'enchainement global. 

C'est cette nouvelle facon de penser qui a - entre autres - motive la creation de l'ele- 
ment <hgroup>. II permet de ne prendre en compte pour I'outline que le premier titre 
de plus haut niveau parmi ceux qu'il contient, et d'ignorer les autres sous-titres lors 
du deroulement de I'algorithme, car ceux-ci ne sont pas destines a creer des sections. 



Ressources Outline 

HTML 5 Outliner (URL ou telechargement de fichier) 

► http://gsnedders.html5.org/outliner/ 

HTML 5 Outliner (bookmarklet JavaScript et extension Chrome) 

► http://code.google.eom/p/h5o/ 
L'outline decrit dans la specification 

► http://www.whatwg.Org/specs/web-apps/current-work/multipage/sections.html#outline 



<hgroup> <nouveau 

Lelement <hgroup> regroupe un ou plusieurs titres <hl> a <h6>. Idealement, il n'a de 
vocation a etre utilise qua partir de deux titres, car il represente l'en-tete d'une sec- 
tion, lorsque celle-ci dispose de plusieurs titres, sous-titres, ou titres alternatifs. 

Exemple d'usage de <hgroup> 

<arti cl e> 
<hgroup> 

<hl>T"itre pri nci pal </hl> 

<h2>Sous-ti tre</h2> 
</hgroup> 

<p>Contenu de 1 'article</p> 
</article> 

Dans cet exemple, <hgroup> represente une specialisation de <header>. Ala difference de 
ce dernier qui peut contenir tout element servant d'introduction a une section, <hgroup> 
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doit etre exclusivement compose d'elements <hl> a <h6>. De son cote, <header> peut 
contenir un titre <hl>a <h6>, ou <hg roup> en complement d'autres elements. 

Autre exemple d'usage de <hgroup> 

<arti cl e> 
<header> 
<hgroup> 

<hl>HTML5 et ses API</hl> 

<h2>0u comment revolutionner le web en douceur</h2> 
</hgroup> 

<p>Publication le <time datetime="2011-02-03">Jeudi 3 fevrier 2011</p> 
</header> 

<p>Contenu de 1 'article</p> 
</article> 

Dans cet autre exemple, l'objet de <hgroup> est de « masquer » les sous-titres a 
l'algorithme pouvant dresser la table des matieres du document (l'outline), et done de 
ne conserver que le titre principal de l'article a savoir <hl>. 



Tableau 4-31 Proprietes de I'element <hgroup> 



Propriete 




Modeles de contenu autorises 


Un ou plusieurs elements <hl> ou <h2> ou <h3> ou <h4> ou <h5> ou 
<h6>. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


hgroup { 

display: block; 

} 



Listes 

Les listes HTML sont prevues pour dresser des enumerations possedant une valeur 
semantique. 

Les structures disponibles pour une liste ordonnee (liste numerotee) et non ordonnee 
(liste a puces) sont constituees paries elements <ol> et <ul> au sein desquels chaque 
element individuel est un <1 i >. Elles sont couramment employees pour la conception 
de menus de navigation, qui ne sont en realite que des enumerations de liens. 

Lorsqu'il s'agit de rediger une liste de definitions, I'element <dl> peut etre utilise en 
conjonction avec <dt> et <dd>. 



113 



HTML 5 - Une reference pour le developpement web 



<0l> 

Une liste ordonnee {ordered list en anglais) est equipee de puces numerotees automa- 
tiquement par le navigateur. Le conteneur <ol> est toujours parent de zero ou plu- 
sieurs elements de liste <\ i >. 

Exemple de liste ordonnee <ol> 

<p>Plan B :</p> 
<ol> 

<li>Stocker tout le parmesan de 1 'univers</"li> 
<~li>Lancer une nouvelle pizza</li> 
<1 i >Conqueri r le monde</l i> 
</ol> 

Figure 4-11 Plan B : 

Apergu de liste ordonnee 

1. Stacker tout le parmesan de I'univers 

2. Lancer une nouvelle pizza 

3. Conquerir le monde 



Tableau 4-32 Attributs specifiques a <ol> 



Attribut 


Valeurs 


Role 


start 


nombre entier 


Valeur de depart pour la numerotation. Peut etre negatif. 


reversed 


reve rsed ou " " ou sans 
valeur 


Indique que la numerotation est descendante. 


type 


1 ou a ou A ou i ou I 


Type de numerotation (numerique classique, lettree, chiffres 
romains). 



Exemples de listes ordonnees <ol> avec attributs 



<ol start="2" type="A"> 
<li>Premier element</li> 
<li>Deuxieme element</l"i> 
<1 i >Troi si erne element</li> 

</ol> 

Figure 4-12 B. Premier element 

Liste ordonnee C. Deuxieme element 

D. Troisieme element 
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<ol start="3" type="i"> 
<li>Premier element</li> 
<li>Deuxieme el ement</l i> 
<li>Troisieme element</li> 

</ol> 



Figure 4-13 

Liste ordonnee a chiffres 
remains 



iii. Premier element 

iv. Deuxieme element 

v. Troisieme element 



Tableau 4-33 Proprietes de I'element <ol> 


Propriete 


Details 


Modeles de contenu autorises 


Zero ou plusieurs elements <1 i >. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


ol { 

display: block; 
list-style-type: decimal; 
-webki t-margi n-before : lem; 
-webki t-margi n-after : lem; 
margin-start: 0; 
-webki t-margi n-end : 0; 
padding-start: 40px; 

> 



<ul> 



La liste non ordonnee {unordered list en anglais) <ul> partage le podium avec <ol> bien 
quelle soit plus frequemment utilisee. Comme son nom l'indique, son contenu n'est pas 
specialement trie et son ordre peut etre change sans alterer significativement son sens. 

Exemple de liste non ordonnee <ul> 

<p>Plan B :</p> 
<ul> 

<li>Stocker tout le parmesan de 1 'univers</li> 
<li>Lancer une nouvelle pizza</li> 
<1 i>Conqueri r le monde</li> 
</ul> 



Figure 4-14 

Apercu de liste a puces, 
non ordonnee 



Plan B 



• Stocker tout le parmesan de I'univers 

• Lancer une nouvelle pizza 

• Conquerir le monde 
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Elle ne dispose pas d'attribut specifique contrairement a <ol >, mais l'apparence par 
defaut de ces deux types de listes peut etre modifiee grace a la propriete CSS list- 
styl e-type qui adopte entre autres les valeurs di sc (defaut), square, ci rcl e pour les 
puces; et armenian, decimal, deci mal -1 eadi ng-zero, georgian, lower-alpha, 
lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman 
pour la numerotation. 



<li> 



Tableau 4-34 Proprietes de I'element <ul> 


Propriete 


Details 


Modeles de contenu autorises 


Zero ou plusieurs elements <1 i >. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


ul { 

display: block; 
list-style-type: disc; 
-webki t-margi n-before : lem; 
-webki t-margi n-after : lem; 
margin-start: 0; 
-webki t-margi n-end : 0; 
padding-start: 40px; 

} 


Si vous avez bien suivi les precedentes explications, vous savez deja que <li> est un 
element {list item en anglais) de liste ordonnee <ol > ou non ordonnee <ul >. 11 remplit 
cette meme fonction pour I'element <menu> (voir du cote des elements interactifs). 




Tableau 4-35 Attributs specifiques a <li> 


Attribut Valeurs 


Role 


value nombre entier 


Valeur ordinale de I'element de liste. 



II comprend un attribut facultatif nomme value, qui fut declare obsolete dans les 
precedentes versions de HTML, mais reintroduit pour des raisons pratiques en 
HTML 5. Cet attribut n'est autorise que dans le cadre d'une liste ordonnee <ol> 
puisqu'il correspond a la numerotation de cette liste pour contrecarrer les effets de 
l'incrementation automatique. 
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Exemple imaginaire d'utilisation de <li> 

<ol> 

<li val ue="l">Premi er element</li> 
<li val ue="3">Deuxi erne element</li> 
<li>Troisieme element</li> 
<li val ue="l">Quatr"i erne element</li> 
<li>Cinquieme element</li> 
</ol> 



Figure 4-15 

Rendu de numerotation 
pour I'element <li> 



1 . Premier element 

3. Deuxieme element 

4. Troisieme element 

1 . Quatrieme element 

2. Cinquieme element 



Propriete 



Tableau 4-36 Proprietes de 1'element <li> 
Details 



Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


<ul>, <ol>, <menu> 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si 1'element est immediatement suivi par 
un autre <1 i> ou qu'il n'y a plus aucun autre contenu dans 1'element 
parent. 


Style par defaut 


1-i { 

display: list-item; 

} 



<dl> 

La liste de definitions <dl> {description list en anglais) repond au besoin de lister des 
paires de termes et de descriptions qui leur sont liees. 

On peut la comparer a un dictionnaire associant la definition <dd> au mot <dt>. 
Aucun tri alphabetique n'est cependant a l'ceuvre, il appartient a l'auteur de la liste de 
l'ordonner dans le code source. 

Exemple de liste de definitions 

<p>Mots-cles pour <span 1 ang="en">medi a queri es</span> :</p> 
<dl> 

<dt>screen</dt> 
<dd>Ecrans</dd> 
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<dt>handhel d</dt> 

<dd>Peri pheriques mobiles ou de petite taille</dd> 
<dt>pri nt</dt> 

<dd>Impressi on</dd> 
<dt>projection</dt> 

<dd>Projecteurs (ou presentations avec s1ides)</dd> 
<dt>tv</dt> 

<dd>Tel evi seur</dd> 
<dt>a"l~l</dt> 

<dd>Tous les precedents</dd> 
</dl> 

Feuille de style associee 

dt { 

col or : green ; 

} 



Figure 4-16 Mots-cles pour media queries : 

Liste de definitions 

screen 

Ecrans 
handheld 

Peri pheriques mobiles ou de petite taille 

print 

Impression 
projection 

Projecteurs (ou presentations avec slides) 

tv 

Televiseur 

all 

Tous les precedents 

Le style par defaut n'est pas folichon, mais les elements <dt> et <dd> sont prets a etre 
styles grace aux proprietes CSS. 

Tableau 4-37 Proprietes de I'element <dl> 



Propriete Details 



Modeles de contenu autorises 


Zero ou plusieurs occurrences d'un ou plusieurs elements <dt> suivis res- 
pectivement par un ou plusieurs elements <dd>. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 
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Tableau 4-37 Proprietes de I'element <dl> (suite) 



rrupneic 




Style par defaut 


dl { 




display: block; 




-webki t-margi n-before : lem; 




-webki t-margi n-after : lem; 




margin-start: 0; 




-webki t-margi n-end : 0; 




} 



<dt> 

Terme de liste de definitions (voir <dl>), I'element <dt> ne peut contenir que des ele- 
ments de phrase. A chaque terme <dt> correspond une definition <dd>. 



Tableau 4-38 Proprietes de I'element <dt> 



<dd> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


<dl> 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si I'element est immediatement suivi par 
un autre <dt> ou <dd>. 


Style par defaut 


dt { 

display: block; 

} 


Element de description de liste de definitions (voir <dl>), I'element <dd> peut con- 
tenir des elements de flux ou de phrase. 11 correspond a I'element <dt> le precedant. 




Tableau 4-39 Proprietes de I'element <dd> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


<dl> 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si I'element est immediatement suivi par 
un autre <dd> ou <dt>, ou s'il n'y a plus aucun autre contenu dans I'ele- 
ment parent. 
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Tableau 4-39 Proprietes de I'element <dd> (suite) 



Propriete 


Details 


Style par defaut 


dd { 




display: block; 




margin-start: 40px; 




} 



Tcxtc 



<p> 



Certainement une des balises les plus rencontrees en HTML, <p> marque le debut 
d'un nouveau paragraphe qui se voit ferme par </p>. Son contenu est de type phrase, 
c'est-a-dire qu'il contient effectivement du texte, potentiellement des sauts de ligne 
<br>, mais aussi d'autres elements de phrase pouvant contribuer a la semantique de 
ce texte, par exemple <em>, <strong>, <abbr>, <ins>, <del>, <q>, etc. 

C'est un element de type bloc qui offre une information semantique au texte qu'il 
contient. Un autre paragraphe le suivant pourra correspondre a une nouvelle idee. Un 
paragraphe ne peut contenir un autre paragraphe. 

Exemple d'usage de <p> 



<p>Ceci est mon premier paragraphe . </p> 
<p>Ceci est mon deuxieme paragraphe . </p> 

Le style par defaut des navigateurs introduit un espace avant et apres chacun des 
paragraphes, qui sont par nature des elements de type bloc. 



Propriete 



Tableau 4-40 Proprietes de I'element <p> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si I'element est immediatement suivi par 
<address>, <arti cl e>, <asi de>, <bl ockquote>, <di r>, 
<di v>, <dl>, <f i el dset>, <footer>, <form>, <hl>, <h2>, <h3>, 
<h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <p>, 
<pre>, <section>, <tabl e>, ou <ul>, ou s'il n'y a plus aucun autre 
contenu dans I'element parent et que cet element parent n'est pas <a>. 
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Tableau 4-40 Propriet.es de I'element <p> (suite) 



Propriete 


Details 


Style par defaut 


P { 




display: block; 




margin: l.Oem Opx; 




} 



< blockquote > 

Un bloc de citation <blockquote> {block quotation en anglais) represente une section du 
document qui est extraite d'une autre source. II peut contenir des elements de flux, c'est- 
a-dire principalement un ou plusieurs paragraphes, mais aussi des titres et des images. 

Exemple de citation a I'aide de <blockquote> 

<p>Un vieux sage disait :</p> 
<bl ockquote> 

<p>Un homme azerty en vaut deux.</p> 
</bl ockquote> 



Tableau 4-41 Attributs specifiques a <blockquote> 



Attribut 


Valeurs 




cite 


URL 


Adresse de reference pour la source de la citation. 



L' attribut ci te fait reference a l'adresse de cette source. II n'est pas rendu visuelle- 
ment dans les navigateurs traditionnels, mais peut etre exploite par des extensions ou 
des robots d'indexation. 



Exemple de citation a I'aide de <blockquote> 

<p>Tim Berners-Lee a ecrit :</p> 

<blockquote ci te="http://www.w3 .org/Peopl e/Berners-Lee/Kids"> 

<p lang="en">I just had to take the hypertext idea and connect it to 
the TCP and DNS ideas and -- ta-da! -- the World Wide Web.</p> 
</bl ockquote> 

Un benefice peut etre tire du nouvel element <footer> en HTML 5 pour afficher la 
source en clair, en tant qu'information separee du contenu principal. 

Exemple de citation a I'aide de <blockquote> et <footer> 

<p>Tim Berners-Lee a ecrit :</p> 

<bl ockquote ci te="http : //www.w3 .org/Peopl e/Berners-Lee/Ki ds"> 
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<p lang="en">I just had to take the hypertext idea and connect it to 
the TCP and DNS ideas and -- ta-da! -- the World Wide Web.</p> 

<footer>- <a href="http://www.w3 .org/People/Berners-Lee/Kids" 
hrefl ang="en">Answers for Young People</ax/footer> 

</bl ockquote> 

Feuille de style associee 

/* Les images blockquotel.png et bl ockquote2 . png correspondent 
aux guillemets affiches autour du bloc de citation */ 
blockquote { 

background: url (blockquotel.png) no-repeat top left; 
margin: lem; 
padding: 50px; 



blockquote footer { 

background: url (bl ockquote2 . png) no-repeat bottom right; 
min-height: 33px; 
margin-bottom: 0; 
padding: 50px 0; 

} 



Figure 4-17 Tim Berners-Lee a ecrit : 

Bloc de citation 

I just had to take the hypertext idea and 
connect it to the TCP and DNS ideas and ■ 
ta-da! -- the World Wide Web. 



Answers for Young People 



L'element <blockquote> est reserve aux citations cl'une taille respectable qui doivent 
etre affichees en bloc, pour les courtes citations, preferez l'element <q>. 



Propriete 



Tableau 4-42 Proprietes de l'element <blockquote> 
Details 



Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


blockquote { 
display: block; 
margin: lem 40px lem 40px; 

} 
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<q> 

Petit frere de <blockquote>, l'element <q> est reserve aux citations courtes. II est 
encadre automatiquement par des guillemets dans tous les navigateurs, sauf Internet 
Explorer 7 et versions inferieures. 

Exemple d'usage de <q> 
<p>Mon leitmotiv est <q>Mieux vaut tar que gz.</qx/p> 

Tableau 4-43 Attributs specifiques a <q> 

Attribut Valeurs 

cite URL 

cite 

Comme pour <blockquote>, 1' attribut cite fait reference a l'adresse de cette source. 
II n'est pas rendu visuellement dans les navigateurs traditionnels, mais peut etre 
exploite par des extensions ou des robots d'indexation. 



Tableau 4-44 Proprietes de l'element <q> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


q { 

display: inline; 

} 

q: before { 
content : "" ; 

} 

q: after { 

content : "" ; 

} 







<citc> 

L'element cite represente le titre d'une ceuvre, citee ou juste mentionnee dans le docu- 
ment. Cette categorie englobe le titre d'un ouvrage, d'une chanson, d'une piece de 
theatre, d'un opera, d'un film, d'une emission de television, d'un jeu, d'une oeuvre d'art 
(peinture, sculpture), d'une exposition, ou plus couramment d'une autre page web, etc. 
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II ne represents pas une citation de texte, et ne doit pas etre confondu pour cela avec 
les elements <q> et <blockquote> qui sont plus appropries, ni avec leur attribut cite. 
II n'est pas voue non plus a baliser le nom d'une personne ou d'un auteur. 

Exemple d'usage de <cite> 

<p>Frank Herbert a ecrit le cycle de <cite>Dune</cite> avec maestria. Si 
1'on devait en f ai re un film, John Williams serait le plus indique pour 
composer la bande originale apres ses prouesses pour <cite>L' Empire 
contre-attaque</cite> et <cite>Jurassic Park</cite> . </p> 



Tous les navigateurs disposent d'un bon support de <cite>. 



Tableau 4-45 Proprietes de I'element <cite> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


cite { 

font-style: italic; 

} 



< strong > 

L' element <strong> confere au texte une forte importance. Visuellement, il est repre- 
sente par un corps de police plus gras, mais contrairement a <b>, il possede une reelle 
valeur semantique. Du contenu place entre balises <strong> doubles aura deux fois 
plus d'importance. 

Exemple d'usage de <strong> 

<p>Il est important de noter que <strong>nous ne remboursons pas</ 
strong> les chaussettes usagees.</p> 

Figure 4-18 II est important de noter que nous ne remboursons pas 

Strong ! les chaussettes usagees. 



Tableau 4-46 Proprietes de I'element <strong> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 
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Propriete 



Tableau 4-46 Proprietes de I'element <strong> (suite) 
Details 



Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


strong { 

font-weight: bolder; 

} 



<em> 



Une emphase peut etre appliquee a une portion de texte avec <em>. II s'agit d'un pro- 
cede linguistique qui donne de l'importance ou une affectation pompeuse au dis- 
cours. II ne doit pas etre confondu avec <i > , meme si son apparence par defaut est un 
style de texte italique. 

Exemples d'usage de <em> 

I<p>J ' <em>adore</em> les pages qui ont du style !</p> 
<p>D'en suis sur : <em>tu</em> as fini les M&M's.</p> 



Figure 4-19 

Emphase ! 



J adore les pages qui ont du style ! 
J 'en suis sur : tu as fini les M&M's. 



Tableau 4-47 Proprietes de I'element <em> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


em { 

font-style: italic; 

} 



<b> 



Balise historique, <b> a vu son sens evoluer. Elle represente desormais une mise en 
valeur via un style different, sans lui conferer d'importance particuliere dans son con- 
texte. II peut s'agir de mots-cles dans un document, de noms de produits dans un article. 
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Exemple d'usage de <b> 

<p>Le <b>patator</b> (aussi appele 1 ance-patate) est une arme 
artisanale, projetant a moyenne distance un projectile, le plus souvent 
une patate.</p> 

II s'agissait initialement d'une balise de mise en gras {bold en anglais) pour le texte. C'est 
pourquoi elle conserve la convention typographique de texte avec graisse accentuee. 
Puisqu'il s'agit a la base d'un critere visuel, cet element a gagne du sens avec HTML 5 afin 
que sa definition ne repose pas uniquement sur son apparence graphique. Cela n'avait de 
sens qu'avec un media visuel, ecran ou imprime ; tandis que cette nouvelle facon de 
l'aborder reste pertinente pour les agents utilisateurs tels que des syntheses vocales. 

La specification precise aussi que Ton peut marquer grace a <b> l'introduction d'un article. 

Exemple d'usage de <b> 

<arti cl e> 

<hl>Geolocalisation en HTML5</hl> 

<pxb>La geolocalisation fait parti e des <abbr title="Appli cation 
Programming Interf ace">API</abbr> gravitant autour de HTML5</b> (<a 
href="http : //dev .w3 . org/geo/api /spec-source . html " 
hreflang="en">Ceolocation API Speci f i cati on</a>) et des nouvelles 
fonctionnal ites introduites par la mobilite. Ses usages sont nombreux et 
souvent correles avec des bases de donnees de rensei gnements 
geographiques .</p> 

<!-- Suite de 1 'article... — > 



La geolocalisation fait partie des API gravitant autour 
de HTML5 f Geolocation API Specification ) et des 
nouvelles fonctionnalites introduites par la mobilite. Ses 
usages sont nombreux et souvent correles avec des bases 
de donnees de rensei gnements geographiques. 



L element <strong> est plus indique lorsqu'on veut conferer une importance au con- 
tenu. 



Figure 4-20 

Mise en avant 



Geolocalisation en HTML5 




Tableau 4-48 Proprietes de I'element <b> 
Details 



Parents autorises 



Tout element pouvant contenir des elements de phrase. 
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Propriete 



Tableau 4-48 Proprietes de I'element <b> 
Details 



Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


b { 

font-weight: bolder; 

> 



<I> 



Figure 4-21 

Mise en avant 



Aux cotes de <b>, la balise <i > tient une bonne place sur le podium des balises histo- 
riques, pour le role de la mise en forme en italique. Avec le souci de la separation de 
la presentation et du contenu pour ne conserver que la valeur semantique du docu- 
ment, cet element visuel n'en menait pas large. Mais sa grande popularite Fa sauve. 
Son role a ete redefini pour une portion de texte qui doit etre « decalee » du contenu 
environnant, mais sans convoyer d'importance ou d'emphase. La convention typo- 
graphique adoptee est le texte en italique (et cela tombe bien !). 

Exemple d'usage de <i> 

<p>La lettre <i>A</i> est la premiere de 1 ' al phabet . </p> 

La specification cite en exemple un terme technique, une designation taxonomique, 
une expression d'une autre langue, une pensee ou un nom de vaisseau. 

Autre exemple d'usage de <i> 

<p>Chewbacca est le copilote du <i>Faucon Mi 11 eni um</i> . </p> 

Chewbacca est le copilote du Faucon Millenium. 



Tableau 4-49 Proprietes de I'element <i> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


i { 

font-style: italic; 

> 
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<small> 



Initialement voue a diminuer la taille du texte dans les precedentes versions de HTML, 
<smal 1 > a ete redefini astucieusement en « small print », ce que Ton pourrait traduire par 
« petits caracteres d'imprimerie figurant au bas des contrats dont l'auteur souhaite que 
Ton ne les Use pas ». Plus prosaiquement, il peut s'agir de mentions specifiques ou 
legates, d'avertissements discrets, ou de la precision d'une licence d'utilisation. 

Exemple d'usage (vecu) de <small> 

<small>Reportez-vous aux <a href="cgv. html ">condi ti ons generales de 
vente</ax/smal 1 > 

On peut egalement le considerer comme note de contenu « equivalente » a un ele- 
ment <aside> en ligne. 

Autre exemple d'usage de <small> 

<small>Les elements de cette page sont sous licence <a rel="license" 
href="http : //creati vecommons .org/1 i censes/by- nc-sa/2 . 0/f r/">Li cence 
Creative Commons</a></small > 



Propriete 



Tableau 4-50 Propriet.es de I'element <small> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


small { 

font-size: smaller; 

} 



<dfn> 



L'element <df n> {defining instance en anglais) represente un terme defini dans le docu- 
ment et plus particulierement dans un bloc de texte. II doit figurer a l'endroit ou Impli- 
cation d'un mot, d'un concept ou d'une association d'idees est evoquee. Mais attention, 
ce nest pas lui qui contient la definition, il s'agit juste de baliser le terme explicite. 

Exemple d'usage de <dfn> 

<p>La <dfn>retrocompati bi 1 i te</dfn> consiste a developper une solution 
technique en tenant compte de son passe, afin d'assurer une continuite 
de fonctionnement avec des precedentes versions. </p> 
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II n'y a pas de regie de style par defaut, mais la plupart des navigateurs ajoutent un 
style italique sur cet element. 



Tableau 4-51 Proprietes de I'element <dfn> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase, sauf <df n>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



<abbr> 

Les abreviations sont de plus en plus courantes. On parle aussi de sigle et d'acro- 
nyme, pour lequel un element <acronym> avait ete prevu dans les versions prece- 
dentes de HTML, mais a ete abandonne puisque peu de redacteurs web faisaient 
reellement la difference entre ces trois categories, qui dependent les unes des autres : 

• une abreviation est un simple raccourcissement de texte (ex : « labo » pour labora- 
toire, « N.-D. de P. » pour Notre-Dame de Paris) ; 

• un sigle est l'abreviation d'une locution dont on ne conserve que les initiales que 
Ton separe en theorie d'un point (ex: « T.V.A. » ou «J.O. » pour Jeux 
olympiques) ; 

• un acronyme est un sigle dont l'ensemble des lettres se lit ou se prononce comme 
un mot (ex : « ONU », « Ovni », « Radar »). 

L' element <abbr> est la pour nous aider a definir ces expressions, sans devoir les pre- 
ciser a la suite du texte, d'une facon genante pour la lecture. 

Exemple d'utilisation de <abbr> 
<abbr title="Hypertext Markup Language">HTML</abbr> 

Figure 4-22 |_e W3C est I'organisme charge de promouvoir les 

Abbr en action standards et la compatibilite des technologies du web 

(HTML, CSS, XML, HTML, PNG. SVG...) 

T Scalable Vector Graphics 



Son attribut ti tl e nest pas specifique - car c'est un attribut global applicable a tous 
les autres elements -, mais c'est lui qui contient la version texte etendue de l'abrevia- 
tion ou de l'acronyme. II sera notamment utilise pour afficher une infobulle au 
survol, si le lecteur desire connaitre l'explication de l'abreviation. 
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Tableau 4-52 Proprietes de I'element <abbr> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



<codc> 

Un fragment de code informatique - quel que soit le langage - peut etre contenu 
dans un element <code>. En general, une police a pas frxe lui est appliquee, ce qui le 
distingue d'un texte conventionnel et evoque bien un morceau d'instruction qui 
pourrait etre lue dans un editeur de texte. 

Exemple d'usage de <code> 

<p>Ce livre contient des allusions a la fonction 
<code>document.getElementById()</code> et a la balise 
<code><script></code>, sans oublier la propriete CSS 
<code>di spl ay</code> . </p> 

Feuille de style associee 

code { 

color: #769712; 
font-size: 120%; 
font-weight: bold; 

} 



Figure 4-23 Ce livre contient des allusions a la fonction 

Extraits de code document . getElementByld ( ) et a la balise 

<s cri.pt>, sans oublier la propriete CSS display. 



Propriete 



Tableau 4-53 Proprietes de I'element <code> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


code { 

font-family: monospace; 

} 
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<var> 



L' element var represente au choix : 

• une variable dans une expression mathematique ou informatique ; 

• un espace reserve a un texte que le lecteur du document peut mentalement rem- 
placer par une autre valeur. 

Exemple d'usage de <var> 

<p>Le produit de la multiplication 

de <var>x</var> par <var>y</var> est 42.</p> 

Feuille de style associee 

var { 

color: #c00; 

} 



Figure 4-24 

Variables 



Le produit de la multiplication de x par y est 42. 



Propriete 



Tableau 4-54 Proprietes de I'element <var> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


var { 

font-style: italic; } 

} 



<kbd> 



L' element kbd represente une entree au clavier {keyboard en anglais), voire au moyen 
d'autres peripheriques d'entree. 

<p>Entrez l'adresse <kbd>www.alsacreations.com</kbd>.</p> 

Lorsqu'il est contenu dans un element samp, il represente une entree telle quelle a ete 
retournee par le systeme. 

<p>Confirmez en cli quant sur <sampxkbd>Oui </kbdx/samp> . </p> 
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A l'inverse, lorsqu'il contient un element samp, il represente une entree basee sur une 
sortie du systeme, par exemple pour invoquer un element de menu. 

Lorsqu'il est contenu dans un autre element kbd, il represente une touche ou un autre 
moyen d'entree. 

Exemple d'usage de <kbd> 

<p>Appuyez sur la touche <kbd><kbd>Fl</kbdx/kbd> ou sur 
<kbdxkbd>Shi f t</kbd>+<kbd>Tab</kbdx/kbd> . </p> 



Feuille de style associee 



kbd kbd { 

background :#f4f0d3; 
border: lpx dashed #dfcb41; 
paddi ng : . lem 0.3em; 
box-shadow: 2px 2px lpx #ccc; 

} 



Figure 4-25 

Double kbd 



Appuyez sur la touche Fl ou sur shift + Tab 



Propriete 



Tableau 4-55 Proprietes de I'element <kbd> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


kbd { 

font-family: monospace; 

} 



<samp> 

La balise <samp> delimite un exemple ou un echantillon (sample en anglais) de sortie 
produite par un programme ou un systeme. 

Exemple d'usage de <samp> 

<p>Si vous obtenez le message <samp>Parse error</samp>, ne pam'quez pas !</p> 
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Propriete 



Tableau 4-56 Proprietes de I'element <samp> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


samp { 

font-family: monospace; 

} 



<sub> 

Un fragment de texte peut etre place en indice avec I'element <sub> {subscript en 
anglais). L'interet est mathematique et chimique. 

Exemple d'usage de <sub> 
Le symbol e chimique de l'eau est H<sut»2</sub>0 

Figure 4-26 

Texte en indice avec <sub> Le symbole chimique de l'eau est H.,0 



Propriete 



Tableau 4-57 Proprietes de I'element <sub> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


sub { 

verti cal -al i gn : sub; 
font-size: smaller; 

} 



<sup> 

L'oppose de <sub> pour placer cette fois-ci le texte en exposant est <sup> (superscript 
en anglais). L'interet est aussi mathematique et chimique, mais permet aussi de 
placer des references pour des notes en has de page. 
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Exemple d'usage de <sup> 

<p>L ' equati on est la suivante :<br> 

(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup> 

</p> 



Figure 4-27 L'equation est la suivante : 

Texte en exposant avec <sup> (g+b) 2 = g 2 + 2flb + b 2 



Tableau 4-58 Proprietes de I'element <sup> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


sup { 

verti cal -al i gn : super; 
font-size: smaller; 

} 



<time> <nouveau> 

Un nouveau venu avec HTML 5 est I'element <ti me>. Dans un web semantique, cet 
apport vient combler un manque cruel de balisage des heures et des dates - hors 
microformats - du calendrier gregorien. 

Ce dernier n'a rien a voir avec les chants du meme nom. II fut instaure par le pape 
Gregoire XIII tandis que les chants datent de Gregoire 1.0. C'est a l'origine pour 
corriger la derive du calendrier julien par rapport a la duree effective de la revolution 
de la Terre autour du Soleil, que Ton a introduit un subtil decalage supplemental 
concernant les annees bissextiles. Les annees seculaires (1800, 1900, 2000...) ne sont 
bissextiles que si elles peuvent etre divisees par 400. Ce calendrier est desormais uti- 
lise dans la majeure partie du monde, et par la totalite des systemes informatiques. 

Lelement <time> represente un avantage non seulement pour la semantique, mais 
aussi pour l'indexation automatisee par les moteurs de recherche, ou encore pour 
l'importation de donnees dans un agenda personnel. Son but est de lever toute ambi- 
guite sur la syntaxe a utiliser pour baliser une date ou une heure. 

Exemple d'usage de <time> 
<p>La Kiwi Party debutera a <time>14:00</time>.</p> 
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Tableau 4-59 Attributs specifiques a <time> 



Attribut Valeurs 


Role 


dateti me 


date ou heure ou date et 
heure 


Permet d'associer une date et/ou une heure a l'element, dans 
un format standardise. 


pubdate 


pubdate ou "" ou (vide) 


Indique que la date donnee est celle de la publication du plus 
proche ancetre <arti cl e> s'il est present, ou sinon du 
document dans sa globalite. 



datetime 

Si l'attribut datetime nest pas specifie, alors le contenu texte de l'element doit se 
conformer au format de date. En revanche, s'il est present, le contenu de l'element 
est totalement libre entre les balises de debut et de fin. 



Usage de <time> avec l'attribut datetime 

<p>La Kiwi Party 2011 est programmer le <time datetime="2011-04-01">ler 
avri 1 </time> . </p> 

Au sujet du format de date autorise, on adapte la notation suivant les besoins. Dans 
les exemples suivants, Y represente un chiffre codant pour les annees (year), M pour 
les mois, D pour les jours (day), H pour les heures, M - apres H - pour les minutes, 
S pour les secondes. Soit YYYY une annee sur 4 chiffres, et HH une heure sur 
2 chiffres entre 00 et 24. On obtient alors : 

• Une date : YYYY-MM-DD, par exemple 2011-04-01 pour le l er avril 2001. 

• Une heure : HH : MM, par exemple 13 : 37 pour 13 h 37. 

• Une date et une heure : YYYY-MM-DDTHH : MMZ pour une date UTC ou YYYY-MM- 
DDTHH : MM+HH : MM pour la precision d'un decalage de fuseau horaire. 

Etant donne que Ton sait desormais que la Terre est spherique - bien qu'il puisse 
encore exister des illumines arguant du contraire sur Internet - et que l'heure univer- 
selle n'est pas la meme en tout point du globe au meme moment, il est d'usage de 
definir des fuseaux horaires lorsque Ton veut rediger des dates qui doivent etre com- 
prises a l'international. 

Le temps universel coordonne UTC ( Coordinated Universal Time) sert de reference. 
II succede a l'ancienne appellation GMT (Greenwich Mean Time). La liste de 
l'appartenance des pays aux differents fuseaux horaires est trop longue pour figurer 
dans cet ouvrage. Si Ton se concentre sur l'Europe, le Royaume-Uni appartient au 
fuseau UTC+0 (avec l'lslande, l'lrlande, le Portugal). Suivent ensuite la majorite des 
pays d'Europe Centrale qui sont en avance d'une heure a UTC+1 (France, Espagne, 
Allemagne, Belgique, Suisse, Norvege, Suede, Italie, Pays-Bas, Autriche, Hongrie, 
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Pologne, Tchequie, Slovaquie, etc.), puis avec UTC+2 les pays d'Europe de l'Est 
(Finlande, Estonie, Roumanie, Bulgarie, Grece), et ainsi de suite. 

Les pays appliquant l'heure d'ete peuvent observer un decalage positif ou negatif. 
Ainsi la France utilise UTC+2 en ete et UTC+1 en hiver. Le Royaume-Uni affiche 
UTC+0 en hiver et UTC+1 en ete. Les decalages ne sont pas forcement entiers, par 
exemple pour l'lnde et le Sri Lanka qui utilisent un fuseau a +5:30. La Chine (dans 
sa globalite) est un des derniers pays a avoir adopte ce systeme en 1949 avec UTC+8. 

La notation terminee par un Z est equivalente a un temps UTC+0 pour lequel on ne 
precise pas de decalage, et done a +00:00. La notation terminee par +HFLMM pre- 
cise un decalage en heures et minutes. De ce fait, +02:00 est equivalent a UTC+2. 

Usage de <time> avec I'attribut datetime 

<p>Le lancement de la Kiwi Party 2011 a eu lieu le <time datetime="2011- 
04-01T14:00+02:00">ler avril a 14h</time> . </p> 

Dans cet exemple, la date est fixee au l er avril 2011, a 14 heures precises, dans le 
fuseau horaire UTC+2 - Paris, heure d'ete a cette epoque de I'annee. 

Les heures peuvent etre completers par des secondes, on ecrit alors simplement 
HH:MM:SS au lieu de HH:MM. Pour atteindre un plus grand niveau de precision, 
il est possible de suffrxer l'heure d'un point « . » et d'une valeur numerique (d'un ou 
plusieurs chiffres) qui representera la valeur decimale de la seconde, par exemple .001 
pour une milliseconde supplementaire. 

Usage de <time> avec grande precision 

<p>Le serveur est en ligne depuis le <time datetime="2011-04- 
14T14:12:05.1270Z">14 avril 2011 a 14hl2m05s</time> . </p> 

L'element <time> ne doit etre utilise que pour des dates valides qui peuvent etre cal- 
culees dans l'intervalle de temps du calendrier gregorien, car le calcul des evenements 
precedant notre ere est complexe, suite a tous les ajustements ayant eu lieu par le 
passe. Ce qui signifie qu'il ne sera pas possible de dater une ceuvre sumerienne telle 
que la Stele des Vautours sur le site du musee du Louvre. Sacre Gregoire. 

pubdate 

Si I'attribut pubdate est present, il confere un role semantique particulier a l'element 
qui devient de facto un repere de temps pour l'element <arti cl e> qui le contient, ou a 
defaut le document entier s'il n'est pas enfant d'un article. 
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Usage de <time> avec I'attribut pubdate 

<arti cl e> 

<p>Cet article a ete mis en ligne 

le <time pubdate>2011-04-01</time> . </p> 
</arti cl e> 
<arti cl e> 

<p>Cet autre article a ete mis en ligne 
le <time pubdate>2011-05-03</time> . </p> 
</article> 

Pour exprimer un intervalle de temps, il suffit d'utiliser plusieurs elements <time>. 
En revanche, un tel element equipe de I'attribut pubdate, doit etre unique dans son 
contexte (un article ne peut pas posseder plusieurs dates de publication). 



Tableau 4-60 Proprietes de I'element <time> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase, sauf <ti me>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



<hr> 

L' element <hr> {horizontal rule en anglais) consiste en une separation horizontale qui 
marque un changement dans le contenu. Bien que les precedentes specifications de 
HTML le definissent uniquement du point de vue de la presentation, il represente 
desormais une separation thematique de paragraphes, de sections de texte, de scenes 
a l'interieur d'un recit. 

Exemple d'usage de <hr> 

<p>Mon premier paragraphe</p> 
<hr> 

<p>Mon deuxieme paragraphe</p> 
Figure 4-28 Mon premier paragraphe 

Separation horizontale avec 

<hr> 

Mon deuxierne paragraphe 

II s'agit d'un element vide constitue d'une balise ouvrante, mais jamais d'une balise 
fermante. En syntaxe XHTML, on le note <hr />. Le style par defaut de la separa- 
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tion n'est pas tres engageant, mais il est tres facile de le modifier avec d'autres ins- 
tructions CSS, notamment en agissant sur la propriete border. 



Tableau 4-61 Proprietes de I'element <hr> 


Propriete 


Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 


Style par defaut 


hr { 

display: block; 
margin: 0.5em auto; 
border-style: inset; 
border-width: lpx; 

} 



<br> 

A I'interieur d'un bloc de texte, un element <br> correspond a un saut de ligne {line 
break en anglais). 

Exemple de saut de ligne 

<p>Ceci est la premiere ligne<br>et ceci la seconde</p> 

Figure 4-29 Ceci est la premiere ligne 

Saut de ligne et cec j i a seconde 

II est deconseille d'utiliser <br> pour introduire des espacements verticaux entre 
d'autres types d'elements, car il n'est pas concu pour cet usage. Ses dimensions peu- 
vent varier en fonction de la taille moyenne de texte affichee dans le navigateur, 
modifiable par l'utilisateur. 

II s'agit d'un element vide constitue d'une balise ouvrante, mais jamais d'une balise 
fermante. En syntaxe XHTML, on le note <br />. 



Tableau 4-62 Proprietes de I'element <br> 



Propriete 


Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 
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<wbr> -nouveau 

Represente une opportunite de coupure de ligne {word break en anglais), a l'interieur 
d'un mot ou d'une phrase. II s'agit d'une aide au moteur de rendu texte lui suggerant 
qu'il serait plus approprie d'effectuer un retour a la ligne a l'endroit ou cet element est 
place, si la longueur du texte excede l'espace reserve par son conteneur. 

Particulierement indique pour les longs mots, il faut savoir que <wbr> ne cree aucu- 
nement de cesure (ou trait d'union) lorsque survient la coupure de ligne. II faudra 
pour cela exploiter l'entite &shy ; . 

Exemple d'usage de <wbr> 

<p>Le mot le plus long de la langue francaise est 
anti <wbr>consti tu<wbr>ti onnell ement</p> 

On peut y trouver un interet pour l'ecriture de liens, souvent longs avec lesquels il est 
possible de se meprendre sur le dernier caractere affiche en fin de ligne, lorsqu'il 
s'agit d'un signe de ponctuation par exemple. 

<wbr> est un element vide qui ne comprend bien entendu aucune propriete de style. 



Tableau 4-63 Proprietes de I'element <wbr> 



Propriete 


Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



<ins> 

L' element <ins> indique un contenu texte ayant ete insere ou ajoute dans le docu- 
ment apres sa publication. 

Par exemple, il s'agit d'une technique de choix pour mettre a jour le texte d'un 
<article> lorsque celui-ci doit etre maintenu a jour au fil du temps et que les lec- 
teurs doivent pouvoir etre informes des changements apportes sur le document. 

Insertion datee d'un jour 

<p>Firefox supporte les formats d' image PNG, GIF, JPEG 
<ins datetime="2010-03-04">et SVG</ins>.</p> 
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Insertion datee d'un jour et d'une heure, avec raison 

<p>Ce sportif a remporte une medaille d'or 

<ins datetime="2010-06-20TlS: 30:00+00:00" cite="nouvelle- 

victoire.html">et deux medailles d'argent</insx/p> 



Figure 4-30 Ce sportif a remporte une medaille d'or et deux medailles 

Rendu de I'insertion avec <ins> d'argent . 



Tableau 4-64 Attributs specifiques a <ins> 



Attribut 

cite 


Valeurs 

URL 


Adresse d'un document externe expliquant la raison de 
I'ajout. 


datetime 


date ou date+heure 


Date (ou date et heure) a laquelle le texte a ete ajoute. 



Visuellement, il est represente par un texte souligne. 



Tableau 4-65 Proprietes de I'element <in> 


Propriete 


Details 


Modeles de contenu autorises Contenu de phrase ou de flux. 


Parents autorises 


Tout element pouvant contenir des elements de phrase ou de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


ins { 

text-decoration: underline; 

} 



<dcl> 

L'element <del> indique un contenu texte ayant ete supprime du document. 

II serait possible de le retirer purement et simplement du code, mais <del> permet 
dans un souci de transparence de conserver en ligne ce contenu et de noter sa date de 
suppression avec l'attribut datetime, ou la raison de ce retrait a l'aide de l'attribut 
ci te faisant reference a un autre document. 

Suppression datee d'un jour 

<p>Google Chrome supporte Theora, WebM <del datetime="2011-01-ll">et 
H.264</delx/p> 
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Suppression datee d'un jour et d'une heure, avec raison 

<p>HTML<del datetime="2011-01-19T13 : 37 : 00+01 : 00" ci te="http : // 
blog.whatwg.org/html -is-the-new-html 5">5</del> est un langage de 
ball sage pour le web</p> 

Figure 4-31 

Rendu de la suppression d'un HTML5 est un langage de balisage pour le web 

caractere avec <del> 

Tableau 4-66 Attributs specifiques a <del> 





ci te 


URL 


Adresse d'un document externe expliquant la raison de la 
suppression. 


datetime 


date ou date+heure 


Date (ou date et heure) a laquelle le texte a ete supprime. 



Visuellement, il est represente par un texte barre. 



Tableau 4-67 Proprietes de I'element <del> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase ou de flux. 


Parents autorises 


Tout element pouvant contenir des elements de phrase ou de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


del { 

text-decoration: line-through; 

} 



<s> 

La difference entre <del> et <s> est subtile. Tandis que <del> concerne un morceau 
de texte ayant ete supprime, car il etait incorrect, <s> est voue aux informations qui 
ne sont plus exactes ou pertinentes. Elles ont par consequent ete eliminees, frappees 
{strike en anglais) par la foudre divine, boutees hors du document. 

Exemple d'usage de <s> 

<p>Notre equipe de web designers emerites 
compte <s>cinq</s> six coll aborateurs . </p> 

Figure 4-32 Notre equipe de web designers emerites compte einq six 

<s> a I'ceuvre talentueux collaborateurs. 
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Visuellement, il est aussi represente par un texte barre, mais ses proprieties par defaut 
peuvent etre enrichies pour marquer encore plus cette difference. 



Tableau 4-68 Proprietes de I'element <s> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


s { 

text-decoration: line-through; 

} 



<prc> 



L'usage de I'element <pre> est voue aux blocs de texte preformates. II s'agit entre 
autres de structurer le contenu pour une meilleure lisibilite, avec une police a pas fixe 
pour convention typographique. Par ailleurs, les espaces multiples sont respectees et 
non fusionnees, ce qui est bigrement pratique pour l'ASCII Art : 



<pre> 

('-. .-■ ■-') _ _ ■-') 

( 00 ) /( 00) ) ( '.( 00 )_ 

,-. ,--./ '._ ,-.),-. 
I I 1 1 ' — — — D I '■' I I I--') I 

■I I'--- ---'I I I I 00 ) 



■-■I II II MCI '• 

III II II III 

I * I I I 1 

</pre> 



' / 



Figure 4-33 

L'art est dans le <pre> 



F Q ASCII Art ! 






«- -> e a [<k 




|s $ □ * 


[■-. .-. .-■> 

( 00 ) /( 00> ) ( 

, — ■ , — ■/ ■■ , 
1 1 1 1 1 ■ — ■ ■ ■ ) 1 
i i r — ■ —'i 
i i i i i 
i - i ii i 
i i i i ii i 


■ -■) 

■ . ( 00 ) 

, — ■> 


1 .-■> 1 1 
1 oo )| ■ — . 

i -■ r — ■ ■ ■ 
■ — i i 

i i •-■ / 


1 ' . ' 1 1 
1 III 
1 1 1 
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II peut etre utilise combine a un element <code> pour representer un code informa- 
tique, ou <samp> pour une sortie. 

<p>Pour centrer le texte des paragraphes en CSS, utilisez :</p> 
<prexcode>p { 

font-size: bold; 
} </codex/p r e> 



Par defaut, la propriete CSS font-family possede la valeur de famine generique 
monospace, c'est-a-dire que toute police par defaut du systeme a espacement fixe 
pourra etre utilisee. 



Tableau 4-69 Proprietes de I'element <pre> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


pre { 

display: block; 
font-family: monospace; 
white-space: pre; 
margin: lem 0; 

} 



<mark> nouveau> 

Un texte contenu entre les balises <mark> et </mark> est considere comme marque ou 
« surligne ». II signale et met en valeur une portion du document sur laquelle on veut 
attirer l'attention, dans un contexte particulier. C'est I'element du marqueur fiuo. 

Lorsqu'il est employe dans une citation, il denote que Ton souhaite marquer de 
maniere specifique le passage balise, meme si ce n'etait pas l'intention originale de 
l'auteur de cette citation. 



Exemple d'usage de <mark> 

<p>Avi ez-vous note le jeu de mots suivant ?</p> 

<p>Un integrateur n'a jamais peur, <mark>il bal i se</mark> !</p> 

Les resultats d'une page de recherche peuvent en profiter, ainsi que les instructions 
marquantes d'un bloc de code contenu dans <pre>. 
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Exemple d'usage de <mark> 



<p>La propriete CSS <code>azimuth</code> est peu connue :</p> 
<prexcode>p . commentai re { 
color:#ccc; 

<mark>azi muth : behi nd ; </mark> 
font-size: smaller; 
}</codex/pre> 



Figure 4-34 

Un extrait de code marque 



La propriete CSS azimuth est peu connue 

p . coramen taire { 
color : #cgg ; 
azimuth: behind; 
font-size : smaller; 

} 



Son apparence par defaut consiste en une couleur de fond jaune vif et un texte noir. 

Tableau 4-70 Proprietes de I'element <mark> 
Propriete Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


mark { 

background-color: yellow; 
color: black; 

} 



<ruby> <nouveau> 

La prise en compte des caracteres annotes de certaines langues etrangeres, notam- 
ment asiatiques est assuree par <ruby>. Les annotations Ruby sont des indications 
qui peuvent etre placees aux cotes d'un ideogramme (generalement au-dessus ou a 
droite) pour donner sa prononciation, notamment pour les moins courants. 

Exemple d'utilisation de <ruby> 

<p lang="zh"> 
<ruby> 

<rt></ rtxrtx/rt> 
</ruby> 
</p> 
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Dans cet exemple, le terme signifie « kanji » ou autrement dit « mot chinois ». II 
comprend deux ideogrammes qui correspondent respectivement a « Han » () c'est-a- 
dire « chinois » (pour simplifier), et a « mot » (). lis sont immediatement suivis de 
leurs annotations, definies par des elements <rt>. 



Figure 4-35 

Exemple de rendu <ruby> 
a I'affichage 




En japonais, cette forme de typographic est appelee furigana. Elle peut etre ecrite en 
hiragana qui est l'alphabet syllabaire (ci-dessus), kanji, katakana ou caracteres latins 
(rmaji). En chinois, la translitteration pinyin est une transcription phonetique du 
mandarin en caracteres latins. 

Tres peu de navigateurs occidentaux supportent nativement cette notation pour le 
moment. Le module CSS 3 Ruby fournit des proprietes pour definir le placement 
des annotations: ruby-position, ruby-align, ruby-span, ruby-overhang. 



Propriete 



Tableau 4-71 Proprietes de l'element <ruby> 
Details 



Modeles de contenu autorises 


Une ou plusieurs occurrences de contenu de phrase suivi d'un element <rt> 
ou d'une suite d'elements <rp>, <rt> et <rp>. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


ruby { 

text-indent: 0; 

} 



<rt> <nouveau> 

L'element <n>(ruby text) figure au sein d'un element parent <ruby> pour marquer 
l'annotation texte. Voir plus haut l'element <ruby>. 
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Propriete 



Tableau 4-72 Proprietes de I'element <rt> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


<ruby> 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi 
par <rt> ou <rp>, ou s'il n'y a plus aucun autre contenu dans I'element 
parent. 


Style par defaut 


rt { 

text-indent: 0; 

} 

rt { 

line-height: normal; 

} 



<rp> nouveau> 

L'element <rp> (ruby parenthesis) figure au sein d'un element parent <ruby> pour per- 
mettre l'ajout de parentheses autour de l'annotation <rt> pour les navigateurs ne 
supportant pas cette fonctionnalite. Ces derniers afficheront done les parentheses. 
Voir I'element <ruby> plus haut. 

Exemple (('utilisation de <rp> 



<p lang="zh"> 
<ruby> 

<rp> (</rp>< rtx/r txrp>) </rp> 
<rp> (</rpx rtx/r txrp>) </rp> 
</ruby> 
</p> 



Propriete 



Tableau 4-73 Proprietes de I'element <rp> 
Details 



Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


<ruby> 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi 
par <rt> ou <rp>, ou s'il n'y a plus aucun autre contenu dans I'element 
parent. 
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<bdo> 

L'element <bdo> {BiDioverride en anglais) surclasse le sens de lecture, determine par 
l'algorithme bidirectionnel Unicode. 

Ressource Standard Unicode 

L'algorithme bidirectionnel Unicode 
► http://unicode.org/reports/tr9/ 

Le terme BiDi provient de Bidirectional en anglais. C'est l'attribut di r qui definit la 
direction : 

• 1 tr : de gauche a droite (left to right) ; 

• rtl : de droite a gauche (right to left). 

Exemple d'usage de l'attribut dir sur un palindrome 
<bdo di r="rtl ">Tu 1'as trop ecrase, Cesar, ce Port-Salut !</bdo> 

Figure 4-36 

Ceci n'est pas un SMS ■ tulaS-troP ec ,raseC ,esarce port sa'l uT 

ecrit en mixed case 



Tableau 4-74 Proprietes de l'element <bdo> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



<bdi> nouveau 

L'element <bdi> (BiDiisolate en anglais), isole son contenu des effets de la mise en 
forme de texte bidirectionnelle. II permet de ne pas aboutir a un alignement confus pour 
du contenu genere par les utilisateurs, pour lequel la direction initiale est inconnue. Par 
exemple, un nom ecrit en langue arabe qui serait melange a du texte latin. 

Pour cet element, l'attribut di r est defini par defaut a auto, et n'herite pas de la 
valeur de ses parents contrairement aux autres elements. 
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Tableau 4-75 Proprietes de I'element <bdi> 



Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



Contenu embarque 

On designe par contenu embarque tout element faisant reference a des donnees stoc- 
kees dans un fichier ou une ressource externe au document HTML. II s'agit 
d'images, d'autres documents HTML, de medias video et d'audio. 

Les nouveaux elements <audio>, <video>, <source>, <track> font l'objet d'un cha- 
pitre dedie, car ils representent une avancee majeure de HTML 5 et meritent une 
attention particuliere. 

II en va de meme pour <canvas> qui necessite un developpement pousse de ses fonc- 
tionnalites ainsi que des instructions JavaScript. 

<img> 

Certainement une des balises les plus connues et les plus usitees de HTML, <img> 
embarque une image stockee dans un fichier externe a l'interieur d'un document web. 

Etant donne les fondations memes du langage, HTML ne decrit que la structure du 
document et son contenu texte. Les images ne sont pas integrees dans ce meme fichier 
HTML, mais stockees dans des fichiers voisins (dans le meme repertoire ou non) avec 
differents formats de compression, possedant chacun des avantages et inconvenients. 

Formats de compression d'images 

Les formats parmi les plus repandus et interpretes actuellement par I'ensemble des 
navigateurs sont : 

Tableau 4-76 Formats de compression d'images pour le Web 



Format 


Compression 


Invention 


Usages 


GIF 


Non destructive si la palette 


Compuserve en 1 987 


Petits elements graphiques, icones, petites 




d'origine comprend moins de 


Format non totalement libre 


images animees 




256 couleurs 




Transparence sur 1 niveau 
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Tableau 4-76 Formats de compression d'images pour le Web (suite) 



Format Compression 

PNG Non destructive 
De 1 a 48 bits 




Images de haute qualite avec niveaux de 
transparence, autres elements graphiques 
Transparence sur 1 niveau en 256 couleurs, 
et jusqu'a 65 535 niveaux sinon 



Usages 




JPEG 



Destructive 
Algorithmes variables 



Groupe JPEG et IBM de 1980 
a 1992 

Brevet soumis a discussions 



Photographies 
Pas de transparence 



Ces caracteristiques ne representent qu'une vue synthetique de l'etat du Web actuel. Ces 
formats comportent de nombreuses subtilites qui les rendent avantageux dans une situa- 
tion et execrables dans une autre. La meilleure methode est l'experimentation et la com- 
paraison des qualites de rendu en parallele de la taille des fichiers generes. 

Ces formats celebres ont egalement ete specifies et declines dans des versions plus 
poussees, et dont le support n'est pas universel : PNG anime, JPEG 2000, JPEG 
sans pertes, etc. Un nouveau format nomme WebP a ete lance a l'initiative de 
Google, faisant appel aux algorithmes de compression du codec WebM/V8, mais son 
support reste aussi tres limite. 

Le GIF dispose d'une variante nommee le GIF anime qui stocke une suite d'images 
compressees dans un meme fichier, avec des durees d'affichage pouvant etre variables 
pour chacune d'entre elles. C'est une invention qui a ete eprouvee (et qui a aussi bien 
eprouve les internautes) durant de nombreuses annees pour les petits elements gra- 
phiques necessitant du mouvement et les bannieres publicitaires. 

Le PNG a ete invente pour ameliorer le GIF, qu'il remplace dans la plupart des situa- 
tions avec brio. Neanmoins, son poids lie a ses algorithmes de compression sans pertes 
de qualite reste un inconvenient pour les images de type photo face au JPEG. Un niveau 
de compression appreciable peut etre obtenu en JPEG avec un compromis sur quelques 
pertes de qualite, qui seront peu perceptibles a l'ceil humain lors de la navigation. 

On designe habituellement par PNG-8 une compression acceptant un maximum de 
256 couleurs (8 bits avec palette indexee) et PNG-24 une compression en « couleurs 
vraies » (codees sur 24 bits). 

La transparence (ou canal alpha) qui permet la superposition d'images a un fond ou 
entre elles, est acceptee de manieres tres differentes : 

• Le GIF la supporte sur un seul niveau, totalement opaque ou totalement transpa- 
rent, ce qui peut creer des effets d'escalier disgracieux. Ce support est total sur 
tous les navigateurs. 

• Le PNG-8 peut la supporter sur un seul niveau en mode 256 couleurs et dans ce 
cas elle refiete les memes caracteristiques que celle du GIF avec un bon support ; 
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ou bien sur 65 535 niveaux (2 ) en PNG-24 ce qui produit un resultat au-dela de 
toute esperance, sauf sur Internet Explorer 6 qui le digere mal et affiche de ruti- 
lantes zones grisatres. 
• Le JPEG ne la supporte pas, du moins pas dans son usage actuel. 

Bref comparatif visuel 

Transcrire le ressenti graphique des formats et taux de compression appliques a des 
exemples dans un tel ouvrage n'est pas aise, car la resolution d'impression n'est pas 
proportionnelle a celle d'un ecran, cependant ils peuvent servir de base a d'autres 
experimentations . 

Plus le taux de compression JPEG est eleve, plus la qualite s'en ressent, et plus la 
taille du fichier est reduite. 






Figure 4-37 

Taux de compression 
en JPEG et qualite 



Pour la compression d'une image de type photographique avec une palette de cou- 
leurs tees etendue et sans formes geometriques, le format JPEG s'avere le plus per- 
formant avec un compromis de qualite moyenne. La compression PNG-24 est sans 
pertes, done l'image est parfaite, mais avec un poids nettement plus eleve. 




Figure 4-38 

Comparatif de compression 
pour une photo 



Dans le cas d'une image disposant d'une palette de couleurs reduite (sans trop de 
degrades, composee de formes simples ou d'aplats de couleur), les formats GIF et 
PNG sont les plus appropries. Ils deteriorent sensiblement moins les contours et la 
nettete. Le poids d'un fichier PNG-8 est proche d'un fichier GIF possedant le meme 
nombre de couleurs. En revanche, la declinaison en PNG-24 produirait un fichier 
plus lourd (environ 23 ko). 
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Figure 4-39 

Comparatif de compression 
pour un logo 



Google Google Google 



JPEG Haut 



15.3 Ko 



Dernier exemple avec une image transparente placee sur un fond quadrille, tel qu'on 
peut en rencontrer dans les logiciels d'edition d'images pour symboliser et reperer 
plus facilement les zones transparentes. L'image JPEG arbore un fond uni par 
l'absence de support de cette transparence. L'image GIF ou PNG- 8 ne definit que 
deux types de zones, totalement transparentes ou non, sans aucun etat intermediate. 
L'ombrage est done soumis a un compromis et impose le choix d'une couleur de fond 
apposee sous les zones initialement semi-transparentes. Seul le PNG-24 respecte 
efficacement le canal alpha sur plusieurs niveaux. 



Figure 4-40 

Comparatif pour 

une image transparente 





1S.1 Ko 10.3 Ko 



Usage des images en HTML 

La balise <i mg> est vouee a detenir des images apportant un plus pour le contenu du 
document, et non pour sa presentation. Elle n'est pas concue pour afficher des 
images de fond ou d'embellissement de la page web pour lesquelles il est tout a fait 
indique d'utiliser les feuilles de style - et bien souvent la propriete background- 
image - afin de toujours conserver la separation entre la forme et le contenu. De 
plus, les instructions CSS offrent des possibilites avancees pour la disposition, la 
repetition des motifs sur deux axes, les fonds multiples, etc. Les images utilisees dans 
ce cadre ne seront pas cliquables, ni destinees a etre imprimees. 

Quelques cas concrets dans lesquels il est recommande d'utiliser <img> : 

• un logo cliquable, associe au titre principal ; 

• une photo d'illustration pour un article ou dans un album photo ; 

• des icones cliquables pour des commandes ou des liens. 
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Quelques cas concrets dans lesquels il est recommande d'utiliser les CSS : 

• images de fond en general (zone de contenu, de navigation, de formulaires) ; 

• images et icones decoratives, separations verticales ou horizontales. 

La specification distingue aussi ces cas selon la presence des attributs alt et src, 
detailles ci-apres : 

• Si aucun des deux n'est defini, l'element ne represente rien. 

• Si seul src est indefini, alors l'element correspond au texte contenu dans alt. 

• Si l'attribut al t est vide, alors l'image est decorative. 

• Si l'attribut alt n'est pas vide, l'image fait partie integrante du contenu et cet 
attribut donne un equivalent texte de remplacement pour l'image. II peut etre 
amene a etre affiche si l'image ne peut etre chargee, si l'utilisateur a desactive 
l'affichage des images, ou s'il navigue a l'aide d'une synthese vocale. 

• Si l'attribut al t est absent et que l'image ne peut etre interpretee ou affichee, 1' agent 
utilisateur peut choisir d'exploiter l'attribut global title ou la valeur de l'element 
<figcaption> si l'ensemble est contenu dans <figure>, en tant que legende. 

Dans l'absolu, les images utilisables sont dans les formats classiques evoques prece- 
demment (PNG, GIF, JPEG), mais il est egalement autorise d'employer des formats 
differents si ceux-ci constituent des documents d'une seule page sans aucun script, 
tels que des documents vectoriels PDF, SVG (XML), SVG anime (SMIL), etc. 
N'entrent pas dans cette categorie les fichiers SVG embarquant un script, les docu- 
ments PDF de plus d'une page, les fichiers MNG, HTML, et ainsi de suite. 

Tableau 4-77 Attributs specifiques a <img> 



Attribut 


Valeurs 


Role 


src 


URL 


Adresse du fichier image. 


alt 


texte 


Texte alternatif a utiliser en cas d'absence de la ressource, 
d'incapacite de I'agent utilisateur a rendre l'image, ou de 
synthese vocale. 


wi dth 


nombre entier positif 


Largeur de l'image en pixels. 


hen ght 


nombre entier positif 


Hauteur de l'image en pixels. 


i smap 


i smap ou "" ou (vide) 


Indique que l'element image donne acces a une image map 
cote serveur. 


usemap 


chaTne de texte 


Norn de l'element <map> a utiliser pour la definition des 
zones cliquables de l'image map cote client. 



src 

L'attribut src est la pierre angulaire de l'image, car il indique l'adresse a laquelle le 
navigateur doit la telecharger avant de l'afficher. 



152 



4 - Elements et attributs HTML 5 



Exemple d'usage de I'element <img> 

<!-- Image dans le meme repertoire que la page HTML --> 

<img src="ba~l"lon . jpg"> 

<!-- Image stockee a la racine du site web --> 

<img src="/palmier. jpg"> 

<!-- Image situee sur un autre site --> 
<img src="http://www.monsi te . com"> 

alt 

Le texte alternatif d'une image est specifie par l'attribut al t. II faut le considerer comme 
un contenu de repli lorsque l'image ne peut etre visualisee. Soit parce quelle n'a pas ete 
trouvee et telechargee, soit parce que le navigateur ne peut comprendre son format, soit 
parce que l'utilisateur n'est pas en mesure de la voir. Le WhatWG resume son principe 
par une astuce : « Une facon de penser l'alternative texte est de reflechir a la maniere 
dont vous liriez la page contenant l'image a quelqu'un d'autre au telephone, sans men- 
tionner que l'image est presente. Quel que soit ce que vous dites en lieu et place de 
l'image, cela constitue un bon debut pour l'ecriture de l'alternative texte. » 

C'est un attribut bien connu, car il etait deja requis en HTML 4 et XHTML 1.0, con- 
trainte qui a fait pester plus d'un integrateur web souhaitant obtenir l'aval complet du 
validateur du W3C. Son usage est souvent ignore ou minimise, car Ton fait appel aux 
images dans tant de situations differentes que les regies applicables ne sont pas force- 
ment toujours comprises. 

Voici quelques-unes de ces regies suggerees par la specification pour le contenu de 
l'attribut alt. 

• Image contenant du texte, ou un titre, ayant ete rendu uniquement pour produire 
un effet graphique impossible a creer avec HTML et CSS : contenu meme du 
texte figurant sur l'image Q. 

• Un lien ou un bouton ne contenant qu'une image : texte decrivant le role du lien 
ou du bouton Q. 

• Courte phrase equipee d'une icone ou d'un logo : attribut al t vide, plutot qu'un 
texte faisant double emploi ©. 

• Paragraphe de texte avec une representation graphique alternative (graphiques, 
diagrammes, illustrations, cartes) : texte reformulant le contenu de l'image ©. 

• Image decorative ou supplemental au texte : attribut al t vide ©. 

• Image decoupee en plusieurs petits fichiers distincts : seul le premier doit corn- 
porter un texte alternatif. 
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Figure 4-41 

Cas pratiques pour I'utilisation 
de I'attribut alt 



{ Q Mon Eapin, ce herns 

' *■ C <t |Q. 



* 



\\f Jf Mon lapin 

w n'est pas comme 



ime les autres 



%- 



p Recettes aux carottes p Bonnes adresses de carottes 




Ce lapin est unique au monde. II est cultive, bolt du 
the en toutes occasions et ne sort jamais sa carotte 
en public. Parmi ses passions figurent les longues 
promenades dans les pres et les discussions 
philosophiques avec ses amies les taupes. II deteste 
se faire pincertres fort les mains entre les portes du 
metro ou que Ton cherche a savoir si une pile est 
cachee dans son das. 



Site cree a la gloire des lapins 



Aucune carotte n'a ete maltraitee durant sa realisation 



Exemples d'usages de I'attribut alt sur <img> 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>Mon lapin, ce heros</title> 
</head> 
<body> 

<header> 

<!-- Titre de premier niveau --> 

<hlximg src="logo-titre.png" alt="Mon lapin n'est pas comme les autres"x/hl> Q 
</header> 

<!-- Navigation --> 
<nav> 
<ul> 

<lixa href="/"ximg src="maison.png" alt="Accueil"x/ax/li> Q 
<lixa href="/recettes.html"ximg src="icone-carotte.png" alt=""> Recettes aux 
carottes</ax/li> Q 
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<lixa href="/adresses.html"ximg src="icone-carotte.png" alt=""> Bonnes 
adresses de carottes</ax/li> 

</ul> 
</nav> 

<P> 

<!-- Photo d' "illustration --> 

<img src="lapin. jpg" style="fl oat: left" alt="Lapin en peluche nonchal amment 
accoude a un sucrier, attendant l'eau pour son the"> Q 

Lapin n'est pas comme les autres. II est cultive, boit du the en toutes occasions 
et ne sort jamais sa carotte en public. Parmi ses passions figurent les longues 
promenades dans les pres et les discussions philosophiques avec ses amies les taupes. 
II deteste se faire pincer tres fort les mains entre les portes du metro ou que l'on 
cherche a savoir si une pile est cachee dans son dos. 
</p> 

<footer> 
<!-- Image decorative --> 

<img src="brochette-de-legumes. jpg" alt=""> 
<p>Site cree a la gloire des lapins</p> 

<pxsmall>Aucune carotte n'a ete maltraitee durant sa realisation</smallx/p> 
</footer> 

</body> 
</html> 



Ressources Attribut alt et techniques 

Cas d'utilisation concrets et exemples par le W3C 
► http://dev.w3.org/html5/alt-techniques/ 



width, height 

Les attributs width et height definissent respectivement l'espace d'affichage alloue 
pour l'image. Idealement, ceux-ci refletent les dimensions reelles du fichier image, en 
pixels. Si tel n'est pas le cas, l'image est redimensionnee par le navigateur avec un rendu 
potentiellement disgracieux si les proportions ne sont pas respectees ou que la resolu- 
tion est insuffisante. 

Si aucune dimension n'est attribuee grace a wi dth ou height, le navigateur alloue auto- 
matiquement l'espace requis d'apres la resolution native du fichier image. Du point de 
vue des performances d'affichage et de rendu graphique, il est souvent recommande de 
preciser ces valeurs de largeur et hauteur afin d'indiquer des le chargement du code 
HTML les dimensions de l'espace a reserver. Le navigateur n'aura pas besoin 
d'attendre le chargement ulterieur de la ressource image pour en deduire ses proprietes. 
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Exemple d'usage de I'element <img> 



<img src="pigments . jpg" width="640" height="427" alt="Pigments de 
differentes couleurs dans une vitrine"> 



Figure 4-42 

Image dont les dimensions 
sont donnees 



640 pixels 
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usemap 

Une image peut etre associee a la definition d'une zone de liens cliquables (ou image 
map), telle que decrite avec I'element <map>. Cet attribut contient alors l'identifiant 
unique de ce dernier pour y faire appel. 



ismap 

La valeur booleenne (true ou fal se) de 1' attribut i smap indique que le navigateur doit 
transmettre les coordonnees du point clique sur l'image au serveur, lorsque celle-ci est 
bien entendu cliquable (par exemple dans un lien <a>). Ces coordonnees sont envoyees 
sous la forme ?x , y et peuvent etre analysees par langage interprete cote serveur. 

Exemple d'usage de I'attribut ismap 

<a href="/i magemap . php"ximg src="pi gments . jpg" a "I t=" Pi gments de 
differentes couleurs dans une vitrine" ismap="true"x/a> 



156 



4 - Elements et attributs HTML 5 




Script PHP recueillant les coordonnees 

<?php 

// Les coordonnees sont obtenues en argument de "I'URL 
Scoordonnees = expl ode ( ' , ' , $_SERVER [ ' QUERY_STRING ' ] ) ; 
list($x,$y) = Scoordonnees ; 



echo 'Coordonnees obtenues :'.$x.' x '.$y.'<br>'; 

if($x>404 && $y>182 && $x<489 && $y<234) { 
echo 'Vous avez clique sur le rose !'; 

} 



?> 



Liens sur images 

Les liens hypertextes appliques aux images revetent les memes caracteristiques que 
les liens sur le contenu texte. L'integralite de la surface de l'image est alors cliquable. 
Pour des raisons d'accessibilite, il est tres fortement recommande de toujours preciser 
un texte alternatif comme valeur de l'attribut al t. 
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Exemple de liens associes a <img> 

<P> 

<a href="hd/l apinl . jpg" title="Voir la photo HD"ximg src="lapinl. jpg" 
alt="Lapin en promenade"x/a> 

<a href="hd/lapin2. jpg" title="Voir la photo HD"ximg src="l api n2 . jpg" 
alt="Lapin devant une Sangria"x/a> 

<a href="hd/lapin3. jpg" title="Voir la photo HD"ximg src="l api n3 . jpg" 
alt="Lapin deguste une Banoffee Pie"x/a> 

<a href="hd/lapin4. jpg" title="Voir la photo HD"ximg src="lapin4. jpg" 
alt="Lapin attend le the"x/a> 
</p> 



Figure 4-44 

Quelques liens sur images 




Cette enumeration de quelques images comprend un lien respectivement sur cha- 
cune d'entre elles, menant vers une version en haute definition stockee dans le sous- 
repertoire « hd ». L'attribut title est affiche en infobulle au survol. 

Par defaut, les images figurant dans un lien arborent une bordure bleue qui est rare- 
ment en harmonie avec le design global de la page web. Une simple regie CSS 
permet de sen affranchir. 

Suppression des bordures sur les images dotees d'un lien 

a img { 
border:0; 

} 

Positionnement des images 

Par defaut, les images sont considerees comme des elements en ligne, c'est-a-dire 
possedant la propriete CSS di spl ay : i nl i ne. Au sein d'un bloc de texte, elles se posi- 
tionnent comme un caractere. 
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II existe de nombreuses techniques et combinaisons d'elements HTML pour posi- 
tionner les images dans le contenu. Les cas de figure les plus frequents sont le cen- 
trage, le fiottement a gauche, le fiottement a droite et le positionnement absolu, qui 
peuvent etre accomplis a l'aide de CSS. 



Propriete 



Tableau 4-78 Proprietes de I'element <img> 
Details 



Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 

Ne doit pas etre descendant de <a> ou <button> si I'attribut usemap est 

utilise. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



<map> 

Un element <map> est utilise en conjonction avec une image <img> pour concevoir 
une carte cliquable appliquee sur celle-ci. Le resultat consiste en des zones distinctes 
et transparentes, de formes variees, equipees de liens. En anglais, on emploie plus 
couramment le terme d'image map. 

Lattribut name est requis pour cet element, car il permet de l'associer a I'element 
image <img> via son attribut usemap. 

Tableau 4-79 Attributs specifiques a <map> 



Attribut 


Valeurs 




name 


nom de I'element image lie 
(attribut name) 


Nom par lequel I'element peut etre reference dans une image 
<img> avec I'attribut usemap. 



Une image map contient un ou plusieurs elements <area> qui definissent chacun une 
zone cliquable d'apres une forme (shape), des coordonnees pour cette forme 
(coords) et une adresse (href). 

Dans cet exemple, on cherche a rendre cliquables individuellement les quatre lettres 
figurant sur cette photo de t-shirt londonien. 

Un lien classique <a> ne permettrait pas d'etablir quatre liens distincts, mais un seul pour 
l'ensemble de l'image. C'est ici que <map> et ses quatre enfants <area> interviennent. 

Exemple d'usage <map> pour <img> 
<img src="nerd. jpg" a~l t="T-shi rt Nerd" usemap="#nerdmap"> 
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<map name="nerdmap"> 

<area shape="rect" coords="264 , 233 , 404 , 423" a"lt="N" href="n . htm"l"> 

<area shape="rect" coords="410, 232 , 540,412" a"lt="E" href="e . html "> 

<area shape="rect" coords="545 , 229 , 657 , 398" a"lt="R" href="r . html "> 

<area shape="rect" coords="663 , 218 , 780 , 390" a"lt="D" href="d . html "> 
</map> 



Figure 4-45 

Une photo 




Figure 4-46 

Mise en evidence 
des zones cliquables 




Ainsi, chaque zone definie par ses coordonnees dans l'image devient un lien inde- 
pendant. Celui-ci peut etre utilise - recevoir le focus - lors de la navigation au clavier 
par tabulation. 
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Propriete 



Tableau 4-80 Proprietes de I'element <map> 
Details 



Modeles de contenu autorises 


Contenu de phrase ou contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de phrase ou de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


map { 

display: inline; 

} 



<area> 



Un element <area> est une zone cliquable individuelle faisant partie d'une image map. 
Tableau 4-81 Attributs specifiques a <area> 



Attribut 


Valeurs 


Role 


href 


URL 


Cible du lien. 


hreflang 


code de langue 


Langage de base de la cible du lien. 


media 
<nouveau> 


media query 


Specifie une requete de media pour laquelle la cible est opti- 
misee (voir I'annexe B en ligne sur les feuilles de style CSS). 


rel 


al ternate , 
archives, author, 
bookmark, external, 
first, help, index, 
last, license, next, 
nofollow, 
noreferrer , 
prefetch, prev, 
search, sidebar, 
tag, up 


Specifie la relation etablie par le lien, entre le document cou- 
rant et la cible. Plusieurs valeurs peuvent etre combinees, 
separees par des espaces. 

(Ne sont pas autorises contrairement a <1 i nk> : i con, 
pingback, stylesheet) 


target 


_blank, _parent, 
_self, _top 
nom d'un element de type 
iframe (attribut name) 


Attribue un contexte de navigation dans lequel suivre le lien. 


type 
nouveau 


type MIME 


Le type MIME de la destination du lien. 


alt 


chame de texte 


Texte alternatif. 


shape 


rect 
ci rcl e 
poly 
default 


Forme de la zone cliquable : 
rect : rectangle ; 
ci rcl e : cercle ; 
poly : polygone ; 

def aul t : rectangle couvrant la totalite de I'image. 
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Attribut 



Valeurs 



Tableau 4-81 Attributs specifiques a <area> (suite) 
Role 



coords 


valeurs numeriques separees 
par des virgules 


Coordonnees de la forme par rapport au coin superieur gau- 
che de I'image, exprimees en pixels, 
pour rect : x1, y1, x2, y2 ; 
pour ci rcl e : x, y, rayon ; 
pour poly :x1,y1, x2, y2, x3, y3, etc. 


download 
nouveau 


nom du fichier apres telechar- 
gement ou vide 


Indique que la ressource liee est prevue pour etre telechar- 
gee. Si une valeur est donnee a I'attribut, elle represente le 
nom du fichier apres telechargement. 



Proche de I' element <a>, une zone cliquable <area> comporte des attributs sembla- 
bles relatifs aux liens, a savoir href, hreflang, media, rel, target, type. On y 
retrouve egalement al t qui confere un texte alternatif a la zone, afin de renseigner les 
internautes naviguant sans image ou avec une synthese vocale. 

Les attributs specifiques shape et coords definissent respectivement la forme de la 
zone ainsi que ses coordonnees. La syntaxe des coordonnees depend de cette forme. 
On y retrouve le coin superieur gauche et inferieur droit d'un rectangle (rect), le 
centre et le rayon d'un cercle (ci rcle), ou une enumeration d'autant de points que 
necessaire pour un polygone (poly). 

Exemple d'usage <area> pour <map> 

<img src="sechage . jpg" alt="" usemap="#fil " width="960" height="640"> 

<map name="fil"> 
<!-- Rectangle --> 

<area shape="rect" coords="131,80,328,289" 

href="chaussettes . html "> 

<!-- Cercle --> 

<area shape="circle" coords="460, 200, 100" 
href="pull .jpg" type="image/jpeg"> 
<!-- Polygone --> 
<area shape="poly" 

coords="597, 119, 552, 327, 465, 371, 502, 492, 479, 617, 638, 632, 679, 499, 744, 485, 
742,430,687,368,716,148" 
href="l api n . html "> 
<!-- Polygone 4 cotes --> 

<area shape="poly" coords="748,114,726,305,862,308,880,115" 
href="seau . html "> 
</map> 
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Figure 4-47 

Differentes formes de zones 
appliquees a I'image 



Propriete 



Tableau 4-82 Proprietes de I'element <area> 
Details 



Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 
Doit posseder un ancetre <map>. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 


Style par defaut 


area { 

display: none; 

} 



<figure> <nouveau> 

Cet element ne correspond pas a proprement parler a un contenu embarque, mais est 
bien souvent en osmose avec <img>. II permet d'associer une legende optionnelle 
<f i gcapti on> a du contenu regroupe en un bloc, qui peut etre independant du contenu 
principal du document. Cela signifie que l'ensemble peut etre place a part, sur une page 
dediee ou une annexe sans modifier de facon majeure la signification principale du texte. 

En d'autres termes, il s'agit de porter sur le Web ce que Ton connait deja sur d'autres 
supports tels que les livres imprimes : enrichir une image, un graphique, une capture 
d'ecran, par une legende. Des contenus plus varies peuvent etre concernes, avec les 
elements <video>, <audio>, <canvas>, des blocs de code <code> ou des tableaux 
<tabl e> complets. 

Historiquement, un apercu typique de ce precede peut etre trouve dans les anciennes 
encyclopedies liant les illustrations aux descriptions par la fameuse abreviation « fig. ». 
Notamment les planches de ce cher Diderot qui sont distinctes des pages de texte. 
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Figure 4-48 

Planche de I'Encyclopedie 
(Diderot et d'Alembert) 
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Exemple d'usage de .'element <figure> 



<!doctype html> 
<head> 

<tit1e>Figure en HTML5</fi tl e> 
<styl e> 
figure { 

di splay : i nli ne-block; 

-moz-box-shadow: Opx Opx 20px #aaa; 

-webkit-box-shadow: Opx Opx 20px #aaa; 

box-shadow: Opx Opx 20px #aaa; 

padding :2em; 

} 

figcaption { 

text-al i gn : center ; 
margin :lem 0; 
col or : #666 ; 
f ont-styl e : i tal i c ; 

font-family: Georgia, Palatino, Palatino Linotype, Times, Times New 
Roman, serif; 

font-size:1.3em; 

} 

</styl e> 
</head> 
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<body> 

<!-- Une image avec une legende --> 
<f igure> 

<img src="nyc-water-taxi . jpg" width="600"> 

<figcaption>Une photo du New York Water Taxi pres de Brooklyn Bridge</ 
figcaption> 
</figure> 

</body> 
</html> 




II convient de styler de facon adequate l'ensemble avec CSS. Dans cet exemple, un 
ombrage a ete ajoute a <figure> ainsi que des proprietes d'alignement et de style de 
texte a <figcaption>. 

Exemple d'usage de I'element <figure> 

<!-- Une image sans legende --> 
<f igure> 

<img src="nyc-water-taxi . jpg" width="1200" height="800" alt="New York 
Water Taxi"> 
</figure> 
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Autre exemple d'usage de <figure> 

<!-- Plusieurs images avec une legende --> 
<f igure> 

<img src="fraise. jpg"> 

<img src="goyave. jpg"> 

<img src="kiwi . jpg"> 

<f i gcapti on>De gauche a droite plusieurs fruits : une fraise, une 
goyave et un kiwi</fi gcapti on> 
</f igure> 

Les differences entre <figure> et <aside> sont liees a 1'importance du contenu vis-a- 
vis du texte les entourant. Si le contenu n'est pas essentiel, il faut preferer <aside>. 
En revanche, s'il est essentiel a la comprehension, mais que sa position dans le flux 
n'est pas importante, il faut preferer <figure>. Dans les autres cas, des elements plus 
classiques tels qu'une simple image <img>, ou des blocs <div>, <blockquote> peuvent 
avantageusement prendre le relais. 

L'utilisation de <figure> n'est pas appropriee dans toutes les situations et doit se faire 
de facon raisonnee. 



Tableau 4-83 Proprietes de I'element <figure> 



Propriete 


Details 


Contenu autorise 


<f i gcapti on> suivi par du contenu de flux 
ou 

contenu de flux optionnellement suivi par un element <f i gcapti on>. 




Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


figure { 

display: block; 
margin :lem 40px; 

} 



<figcaption> nouveau 

Le role de <fi gcapti on> est de conferer une legende a I'element <figure>. Son con- 
tenu autorise est un contenu de type flux, c'est-a-dire du texte, mais aussi d'autres 
elements de flux tels que des liens pouvant cibler une page avec des explications sup- 
plementaires ou une reference a l'auteur de l'illustration. Une legende peut figurer 
dans le code avant ou apres le contenu dans <figure>. 
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Exemple d'usage de I'element <figcaption> 



<figure> 

<figcaption>Une photo du New York Water Taxi pres de Brooklyn Bridge 
</figcaption> 

<img src="ny-water-taxi . j pg" width="1200" hei ght="800"> 
</figure> 

Tableau 4-84 Proprietes de I'element <figcaption> 



Propriete 


Details 


Contenu autorise 


Contenu de flux. 


Parents autorises 


<figure> 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


figcaption { 
display: block; 

} 



<iframe> 



L'element <iframe> {inline frame en anglais) embarque dans la page un autre docu- 
ment HTML, telle une vue sur un autre monde... II s'agit d'un contexte de naviga- 
tion imbrique dans un « cadre ». 

Bien que cette possibilite puisse sembler bien pratique, il faut en faire usage avec pre- 
caution, car le contexte de navigation est alors complexifie, autant pour le deve- 
loppeur du site qui doit preter attention a la securite et a la facon dont les liens 
hypertextes sont executes, que pour l'accessibilite du contenu. 

Tableau 4-85 Attributs specifiques a <iframe> 



Attribut 


Valeurs 




src 


URL 


Adresse du document a afficher. 


wi dth 


% ou pixels 


Largeur 


hei ght 


% ou pixels 


Hauteur 


name 


nom de I'iframe 


Nom unique de I'iframe utilise par d'autres elements qui y 
font reference via un attribut target. 


sandbox 
nouveau 


al 1 ow-forms 

al 1 ow-same-ori gi n 

al 1 ow-scri pts 

al 1 ow-top- 

navigation 


Restrictions de securite et exceptions. 
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Tableau 4-85 Attributs specifiques a <iframe> (suite) 



Attribut Valeurs Role 



seam! ess 
nouveau 


seamless ou "" ou (vide) 


Si cet attribut est present, I'iframe apparaTt en tant que partie 
du document dans lequel elle est presente, sans bordure ni 
barre de defilement. L'attribut target des liens est alors 
fixe par defaut a parent. 


srcdoc 
nouveau 


HTML 


Contenu HTML a afficher par defaut dans I'iframe. Si le navi- 
gateur ne supporte pas cet attribut, il utilisera a la place le 
contenu specifie dans l'attribut src. 



Les attributs align, allowtransparency, frameborder, margi nhei ght, margi nwi dth, 
scrol 1 i ng sont obsoletes et peuvent avantageusement etre remplaces par CSS. L'attribut 
1 ongdesc peut etre remplace par un lien <a> menant vers une description longue. 



src 

L'adresse du document externe est definie par l'attribut src. 
<i frame src="autre document . html "></i f rame> 

width, height 

Les dimensions de I'element doivent etre definies en accord avec l'espace disponible 
sur la page accueillant I'element, et l'espace requis par l'affichage du contenu pour le 
document imbrique. Si la longueur et/ou la largeur du contenu excedent les dimen- 
sions accordees, des ascenseurs de defilement peuvent apparaitre. 

Exemple plus avance d'une <iframe> 

<!DOCTYPE html> 
<html > 
<head> 

<ti tl e>Document parent</ti tl e> 
</head> 
<body> 

<p>Avant l'iframe</p> 

<iframe sandbox="al low-scripts allow-forms" width="400" height="300" 
src="i frame . html "></i f rame> 

<p>Apres l'iframe</p> 
</body> 
</html> 

Le second fichier iframe.html utilise dans cet exemple et appele dans I'<iframe> 
comporte une serie de paragraphes de texte. lis ne sont pas tous reproduits, car le 
latin n'est heureusement pas l'objet de cet ouvrage. 
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Contenu du fichier iframe.html 

<!DOCTYPE html> 

<html> 

<head> 

<ti tl e>Document imbri que</ti tl e> 
</head> 
<body> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus 
hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet 
vel , dapibus id, mattis vel , nisi. Sed pretium, ligula sollicitudin 
laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu 
nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p> 

<!-- et ainsi de suite ... --> 
</body> 
</html> 



Figure 4-50 

Affichage d'un element 
<iframe> 



Q Document parent 

*■ ■* c ft <*. 



ft \ 



Lorem ipsiim dolor sit amet consectetuer adipiscing elit. 
Phasellus hendrerit. Pellentesque aliquet nibh nec. urna. In nisi 
neque : aliquet veL dapibus ii mattis. veL nisi. Sed pretium : 
Egula sollicitudin laoreet viverra, tortor libera sodales let 
eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. 
Suspendisse potenti. 



Sed egestas : ante, et vulputate vohitpat eros pede semper 
est vitae luc.tus metus libero eu augue. Morbi purus. libero : 
faucibus adipiscing, commodo quis. : gravida ii est. Sed 
lectus, Praesent elernentuni hendrerit tortor. Sed semper 
lorem at feEs. Vestibutum vohitpat lacus a ultrices saghtis. mi 
neque euismod dui : eu purvinar nunc sapien ornare nisi. 
Phasettus pede arcu : dapibus eu : fermentum et : dapibus sed 




Q Document imbrique x y Q 



*■ ■* e ft <\ 



ft ^ 



^Mft mollis 

CT ^Igut 

ro. 



Lorem ipsum dolor sit amet consectetuer 
adipiscing eEt Phasellus hendrerit. Pellentesque 
aliquet nibh nec urna. En nisi neque : aliquet vel. 
dapibus ii mattis veL nisi. Sed pretiutrr ligula 
sollicitudin laoreet viverra, tortor libero sodales 
leo : eget blandit nunc tortor eu nibh. Nullam 
mollis. Ut justo. Suspendisse potenti. 



egestas : ante et vulputate vohitpat, eros 
semper est vitae hictus metus libero eu 
augue. Morbi purus Kbero = faucibus. adipiscing, 
commodo quis : gravida irL est. Sed lectus. 
Praesent elementuni hendrerit tortor. Sed 
semper lorem at feEs. Vestibutum vohitpat. 
lacus a ultrices sagittis : mi neque euismod dui. 
eu putvtnar nunc sapien ornare nisi. Phasettus 
pede arcu : dapibus eu : fermentum et : dapibus 
sed, urna. 

Morbi interdum molEs. sapien. Sed ac risus, 
Phasellus lacinia, magna a ullamcorper laoreet : 



sandbox nOUVeOU> 

L'attribut sandbox est un bac a sable securitaire nouveau en HTML 5. II est destine a 
etre applique pour un element <i f rame> dont le contenu ne serait pas sur, et pourrait 
eventuellement comprendre un code HTML genere par des utilisateurs ou par des 
domaines externes pour lesquels aucune garantie sur la qualite du code n'est donnee. 

Lorsque cet attribut est precise vide, le contenu de l'<iframe> est soumis ipso facto a 
ces restrictions : 

• Les formulaires, scripts et plug-ins sont desactives. 

• Pas d'acces aux elements stockes en local (cookies, sessionStorage, localStorage). 
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• Les requetes XMLHttpRequest (Ajax) ne peuvent etre envoyees. 

• Les liens ne peuvent pas cibler (grace a target) d'autres « cadres » (frames) ou 
contextes de navigation. 

• Le contenu est traite par defaut comme provenant d'une origine externe (un autre 
domaine), ce qui l'empeche d'acceder a certains contenus initiaux et notamment 
le DOM. 

Ces restrictions peuvent etre levees individuellement en utilisant une ou plusieurs des 
valeurs au sein de l'attribut : 

• allow-forms : autorise les formulaires ; 

• allow-same-origin : autorise le contenu a etre traite comme provenant de la 
meme origine au lieu d'etre considere comme provenant d'un autre domaine ; 

• allow-scri pts : autorise les scripts (hormis les pop-ups) ; 

• allow-top-navigation : autorise l'iframe a acceder a la navigation de niveau 
superieur. 

Plusieurs options peuvent etre combinees dans l'attribut en les separant par des espaces. 
Exemple d'usage de l'attribut sandbox 

<iframe sandbox="al low- same-origin allow-forms al low-scripts" 

src="http ://maps . googl e . f r"x/i f rame> 

Les navigateurs ne reconnaissant pas cet attribut l'ignoreront. Aucune regie de secu- 
rite particuliere ne sera en revanche appliquee. La detection est aisee en JavaScript : 

i f ("sandbox" in document. createElement("if rame")) { 
// HTML5 sandbox est supporte 

} 

srcdoc nouveau 

Le nouvel attribut srcdoc permet de definir le contenu de 1' element <iframe> sans 
faire appel a un fichier externe au document. Sa valeur represents alors le code source 
complet que le navigateur doit interpreter. 

Usage de l'attribut srcdoc 

<p>Commentai re de Dark Vador :</p> 

<iframe seamless sandbox srcdoc="<p>"Luke, je suis ton 
pere . &quot ; </p>"x/i f rame> 

Les guillemets ("), eventuellement presents dans le code indique, doivent etre rem- 
places par des entites &quot ; pour eviter de fermer prematurement cet attribut. 
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seamless nOUVeaU> 

L'attribut seaml ess est egalement un nouveau venu. II affecte la facon dont le navi- 
gateur imbrique l'<i f rame> dans la page. 

Lorsque cet attribut est present, les liens sont suivis et ouverts par defaut dans le con- 
texte de navigation parent, comme si le contenu appartenait de facon transparente au 
document abritant l'element <iframe>. Les navigateurs ne supportant pas encore 
cette fonctionnalite peuvent neanmoins adopter le meme comportement en ajoutant 
au contenu du cadre la balise <base target="_parent">. 

De meme, les styles CSS affectent directement le contenu de l'<iframe>, comme si 
son DOM faisait partie integrante du DOM parent. II n'y a pas de technique pour 
mimer ce comportement sur les navigateurs ne supportant pas l'attribut seamless, 
hormis la replication des memes styles dans l'element enfant, ou l'usage d'une feuille 
de style commune avec des selecteurs adaptes. 



Tableau 4-86 Proprietes de l'element <iframe> 



Propriete Details 


Modeles de contenu autorises 


Texte simple. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 

Ne doit pas apparaTtre en tant que descendant de <a> ou <button>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


i frame { 

border: 2px inset; 

} 



L'element <iframe> n'est pas un element vide, et doit comprendre une balise 
ouvrante et une balise fermante pour etre valide. 

Pour s'affranchir de la bordure par defaut, il faudra ajouter une declaration CSS : 



i frame { 

border: none; 

} 

<embed> 

L'element <embed> est voue a l'integration de contenu externe dans le document 
HTML. II peut s'agir de donnees non supportees de facon native par le navigateur, 
necessitant I'intervention d'un plug-in — une extension complementaire au 
navigateur - pour leur interpretation. 
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Ces donnees peuvent parfaitement etre de type image (assimilable a <img>), voire 
meme une autre page HTML initiant un nouveau contexte de navigation (assimi- 
lable a <iframe>). Cependant, il vaut mieux consacrer a ces usages les elements 
prevus a cet effet. 

La balise <embed> fut introduite par Netscape Navigator 2.0 en des temps recules lors 
de la course aux balises proprietaires. II s'en est suivi une periode mouvementee, lors 
de laquelle moult plug-ins interpretant des donnees binaires ont surgi du neant, tous 
incompatibles les uns avec les autres, et d'un systeme d'exploitation a l'autre. 

Cet element n'avait jamais recu l'aval du W3C, qui lui preferait <object>. Cepen- 
dant, il a ete officiellement integre a HTML 5 par pragmatisme, puisque tous les 
navigateurs le supportent et qu'il figure sur d'innombrables pages, notamment pour 
des raisons de retrocompatibilite concernant la video ou les animations Flash. 

En HTML 4, un texte alternatif pouvait etre place dans un element enfant 
<noembed> pour conserver un semblant d'accessibilite a destination des (tres) anciens 
navigateurs et lecteurs d'ecrans n'exploitant pas <embed>. Cependant, cet artifice 
n'existe plus en HTML 5. 

Tableau 4-87 Attributs specifiques a <embed> 



Attribut 


Valeurs 


Role 


src 


URL 


Adresse du contenu. 


type 


type MIME 


Type MIME du contenu. 


wi dth 


nombre entier positif 


Largeur du contenu affiche en pixels. 


hen ght 


nombre entier positif 


Hauteur du contenu affiche en pixels. 



Lelement <embed> est un element vide, il ne doit pas posseder de balise fermante. 

II faut noter qu'il n'est pas affecte par la propriete CSS di spl ay, et qu'un plug-in est 
initialise meme si la declaration display: none est appliquee a <embed>. 

Exemples d'usage de <embed> 



<!-- Video Quicktime --> 

<embed type="video/quicktime" src="mes_vacances .mov" width="640" 
height="480" /> 

<!-- Animation Adobe Flash --> 
<embed src="animation . swf " /> 

<!-- Son --> 

<embed src=" jechante .wav" /> 
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La grande variete de plug-ins existant ne permet pas d'en dresser une liste exhaustive 
et encore moins de faire figurer toutes les syntaxes possibles. Les attributs autorises 
pour <embed> repondent a une particularite singuliere : la specification HTML 5 ne 
se limite pas a une liste precise, mais indique que tout attribut sans espace de noms 
(namespace) est autorise, a condition qu'il soit different de name, align, hspace et 
vspace qui sont d'anciens attributs obsoletes pour cet element. 

Cette exception provient en ligne directe de l'heritage trouble des plug-ins, chacun 
ayant introduit ses attributs proprietaires selon ses besoins de configuration. Les 
attributs d'<embed>, quels qu'ils soient, sont alors passes en parametre au plug-in. Par 
exemple, une animation Flash peut necessiter la precision du parametre de qualite 
(quality), qui n'est absolument pas mentionne, dans aucune specification HTML. 

<embed src="animation.swf" qual ity="high"> 

Ce qui est - en theorie - equivalent a un passage de parametre a I'element <object> 
via <param>. 

<object data="ani mation . swf "> 

<param name="qual ity" val ue="high"> 

</object> 

Mais c'est une autre histoire... 

Imbrications avec <object> et elements media 

Pour des questions de retrocompatibilite et pour permettre aux navigateurs suppor- 
tant un plug-in via <embed> mais non via <object>, il est possible d'imbriquer un ele- 
ment <embed> dans <object>. De la meme facon, il peut etre lui-meme enfant d'un 
element media, c'est-a-dire en HTML 5 de <video> et <audio>. Void deux vues 
simplifies et imaginaires sans attributs : 

<!-- Avec video, object, embed --> 
<vi deo> 

<object> 
<embed> 

</object> 
</vi deo> 

<!-- Avec video et embed seulement --> 
<vi deo> 

<embed> 
</video> 
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<!-- Avec object et embed seulement --> 
<object> 

<embed> 
</object> 

Dans le cas present, cette structure est prevue pour passer d'un element parent a son 
fils, si le parent n'est pas reconnu. Un navigateur ne reconnaissant pas actuellement la 
balise <vi deo> de HTML 5 l'ignorera superbement et tentera une interpretation 
d'<object>. De la meme maniere, si le navigateur n'eprouve pas d'affinite particuliere 
avec ce dernier, il pourra ceder la main a un element enfant, et ainsi exposer un con- 
tenu de repli alternatif- typiquement <embed> ou un texte d'information. 

L'element <embed>, quant a lui, ne dispose d'aucun moyen de fournir un contenu de 
repli alternatif {fallback en anglais). II ne peut etre actif que s'il n'est pas descendant 
d'un element media (<audio>, <video>) ou d'un element <object> qui n'exposent 
pas leur contenu de repli. 



Propriete 



Tableau 4-88 Proprietes de l'element <embed> 
Details 



Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 

Ne doit pas apparaTtre en tant que descendant de <a> ou <button>. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



<objcct> 

L'element <object> est dope aux hormones. II a ete standardise par HTML 4 et 
possede une syntaxe plus evoluee qu'<embed>. Son role est egalement de faire appel a 
des moteurs applicatifs complementaires aux fonctions natives du navigateur. C'est- 
a-dire des extensions ou plug-ins qui interpretent les donnees et les fichiers binaires. 

Un auteur l'utilisant peut fournir trois types d'information : 

• le code a invoquer ou le type de l'extension a mettre en action ; 

• l'emplacement des donnees (du fichier) a interpreter ; 

• d'eventuels parametres initiaux pour l'execution de l'extension. 

C'est un element generique qui porte bien son nom et qui fit son apparition avec 
Internet Explorer 3 et les objets proprietaires ActiveX. Nombre de ses attributs his- 
toriques sont obsoletes en HTML 5 : 

• Les attributs data et type doivent etre utilises en remplacement de archive, 
classid, code, codebase, codetype pour invoquer l'extension. 
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• Les attributs declare et standby sont obsoletes; les attributs align, hspace, 
vspace et border sont aussi obsoletes et doivent etre remplaces par CSS. 



Attribut 



Tableau 4-89 Attributs specifiques a <object> 



Valeurs 



data 


URL 


Adresse de I'objet. 


type 


type MIME 


Type MIME de I'objet. 


wi dth 


nombre entier positif 


Largeur de I'objet en pixels. 


hei ght 


nombre entier positif 


Hauteur de I'objet en pixels. 


usemap 


chame de texte 


Nom de I'element <map> a utiliser pour la definition des 
zones cliquables de Vintage map cote client. 


name 


chame de texte 


Nom de I'objet (au moins un caractere, ne debutant pas par 
le caractere "_"). 


form 


identifiant unique (attribut 

id) 


Identifiant du formulaire a associer a I'objet. 



Outre Importance des attributs data et type conseilles pour la bonne marche de 
I'element, et contrairement a <embed>, aucun attribut « libre » n'est permis. La syn- 
taxe permettant de specifier des parametres est sensiblement modifiee puisqu'elle fait 
appel a des elements enfants <param>, autant qu'il est necessaire pour indiquer des 
valeurs differentes. 



Exemple d'usage d'<object> 

<object width="640" hei ght="480"> 

<param name="movie" value="animation.swf"> 
<param name="qual i ty" value="high"> 

</object> 



Comme cela a deja ete evoque pour I'element <embed>, il est envisageable de per- 
mettre le repli vers un contenu alternatif si <object> ne peut etre interprete par le 
moteur de rendu. Ce contenu doit etre place apres l'ensemble des parametres, au sein 
meme de I'element. II sera totalement ignore si <object> est actif, et utilise si 
<object> est inactif. Dans bon nombre de cas, on choisit un repli vers <embed> qui 
offre un support minimaliste de la plupart des ressources utilisables dans <object> 
(Flash, video, etc.) a d'anciens navigateurs. 

C'est la methode qui fut utilisee par YouTube pour l'integration de videos sur les sites 
tiers, avant le passage a un element <iframe> a la syntaxe plus breve en 2011, 
incluant par la meme occasion le support de I'element HTML 5 <video> ! 
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Exemple d'usage d'<object> combine a <embed> 

<object width="640" height="480" type="appl i cati on/x-shockwave-f 1 ash"> 

<param name="movie" value="animation.swf"> 
<!-- Contenu de repli (fallback) --> 

<embed src="animation.swf" width="640" hei ght="480"> 

</embed> 
</object> 

Tableau 4-90 Proprietes de I'element <object> 



Propriete Details 



Modeles de contenu autorises 


Zero ou plusieurs <param> suivis de contenu de flux ou de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase ou de flux. 

Ne doit pas apparaTtre en tant que descendant de <a> ou <button> si 

I'attribut u semap est utilise. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



Le cas de Flash 

II serait difficile de passer sous silence une technologie aussi repandue et populaire 
que Flash, fut-elle proprietaire a Adobe et etrangere aux specifications HTML. 
Durant bien des annees, les animations Flash placees dans les documents web 
mecontentaient les validateurs syntaxiques du W3C (voir la section « La validation » 
du chapitre 2 « HTML en seconde langue »), puisque les codes par defaut proposes a 
l'integration faisaient appel a <embed>, element absent des precedentes specifications. 

II est desormais possible en HTML 5 d'utiliser un code valide. En voici un exemple 
complet pour une video YouTube exploitant une syntaxe sans element <iframe>. 
Lattribut data a ete ajoute sur <object>, reprenant l'adresse de la ressource Flash. 
Les balises <param> et <embed> deviennent autofermantes. 

Code complet d'une page HTML 5 validant avec un objet Flash 

<!doctype html> 

<html> 

<head> 

<title>Video YouTube Flash en HTML5</ti tl e> 

</head> 

<body> 

<!-- Debut de 1 'objet --> 

<object width="480" height="390" data="http://www.youtube.com/v/ 
v9MTCNaEXGM?f s=l&amp ; hi =f r_FR&amp ; rel =0" type="appl i cati on/x-shockwave- 
f 1 ash"> 
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<!-- param --> 

<param name="movi e" value="http://www.youtube.com/v/ 
v9MTGNaEXGM?f s=l&amp ; hi =f r_FR&amp ; rel =0"/> 

<param name="allowFunScreen" val ue="true"/> 

<param name="allowscri ptaccess" val ue="always"/> 
<!-- embed --> 

<embed src="http://www. youtube . com/v/ 
v9MTCNaEXCM?f s=l&amp ; hl=f r_FR&amp ; rel=0" type="appl i cati on/x-shockwave- 
flash" al 1 owscri ptaccess="always" allowfull screen="true" width="480" 
height="390"/> 
</object> 

<!-- Fin de 1'objet --> 

</body> 
</html> 

Les parametres pouvant etre tees varies, cet exemple ne represente pas une solution 
unique. 

< param > 

Les parametres d'une invocation de 1' element <object> sont declares par zero ou 
plusieurs paires de cles etvaleurs stockees dans enfants <param>. 



Tableau 4-91 Attributs specifiques a <param> 



Attribut 


Valeurs Role 


name 


chame de texte 


Nom du parametre. 


val ue 


chame de texte 


Valeur du parametre. 



La syntaxe des noms et valeurs est supposee comprise par 1'objet concerne et le code 
de l'extension l'interpretant. 

Exemple d'usage de <param> 



<object> 

<param name="parametrel" val ue='Va7eurl"> 
<param name="parametre2" val ue="valeur2"> 
<!-- et ainsi de suite... --> 
</object> 

Les elements <param> doivent figurer dans <object> avant tout autre contenu even- 
tuel qui servirait de contenu de repli alternatif, en cas de non support. 
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Propriete 



Tableau 4-92 Proprietes de I'element <param> 
Details 



Modeles de contenu autorises 


Element vide. 


Parents autorises 


<object> 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 


Style par defaut 


param { 

display: none; 

} 



< video nouveau> 

Un media de type video. 

Voir le chapitre 7 « Audio et Video » pour cet element <vi deo> et les suivants <audi o>, <sou rce>, 
<track>. 



Propriete 



Tableau 4-93 Proprietes de I'element <video> 
Details 



Modeles de contenu autorises 


En I'absence d'attribut src : un ou plusieurs elements <source> suivis de 
zero ou plusieurs <track>, suivis de contenu de flux. 
En presence d'attribut src : zero ou plusieurs elements <track>, suivis de 
contenu de phrase. 


Parents autorises 


Tout element pouvant contenir des elements de phrase ou de flux. 

Ne doit pas apparaTtre comme descendant de <a> ou <button> si I'attri- 

but control s est utilise. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



<audio> nouveau> 

Un media de type audio. 



Tableau 4-94 Proprietes de I'element <audio> 



Propriete 


Details 


Modeles de contenu autorises 


En I'absence d'attribut src : un ou plusieurs elements <source> suivis de 
zero ou plusieurs <track>, suivis de contenu de flux. 
En presence d'attribut src : zero ou plusieurs elements <track>, suivis de 
contenu de phrase. 
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Tableau 4-94 Proprietes de I'element <audio> (suite) 



Propriete Details 


Parents autorises 


Tout element pouvant contenir des elements de phrase ou de flux. 

Ne doit pas apparaTtre comme descendant de <a> ou <button> si I'attri- 

but control s est utilise. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



<source> <nouveau> 



Une ressource media pour les balises <audio> et <video>. 

Tableau 4-95 Proprietes de I'element <source> 



Propriete 


Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


<audi o>, <vi deo> 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



<track> nouveau> 

Une ressource texte pour media <audio> ou <video>. 



Tableau 4-96 Proprietes de I'element <track> 



Propriete Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


<audio>, <video> 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



<canvas> nouveau 

Une zone de dessin bitmap pilotable avec un <scri pt>. 



Voir le chapitre 8 sur le « Dessin avec Canvas ». 



Tableau 4-97 Proprietes de I'element <canvas> 



Propriete 


Details 




Modeles de contenu autorises 


Contenu de phrase ou de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux ou de phrase. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 
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Donnees tabulaires 

<table> 

Un element <table> est destine a contenir des donnees tabulaires. Par cela, on 
designe un ensemble d'informations qui peuvent ou qui doivent etre presentees dans 
une structure formatee en colonnes et en lignes. Differents elements enfants peuvent 
apporter une valeur semantique au contenu : en-tete et titre de tableau, intitules de 
colonnes ou de lignes, etc. 

Entre la balise ouvrante <tabl e> et la balise fermante </tabl e>, peuvent etre places : 

Tableau 4-98 Imbrications pour <table> 



Element 


Occurrences 


Role 


<capti on> 


Oou 1 


Titre du tableau. 


<colgroup> 


ou + 


Proprietes pour un groupe de colonnes. 


<thead> 


Oou 1 


En-tete du tableau. 


<tfoot> 


ou 1 


Pied du tableau. 


<tbody> 
ou 

<tr> 


ou + 


Corps du tableau (contenant tr, th, td). 


1 ou + 


Lignes du tableau (contenant th, td). 



Chaque element <tr> represente une ligne de la table, qui contient elle-meme un ou 
plusieurs <td> ou <th>. 

Exemple <table> minimaliste 



<tabl e> 
<tr> 

<td>Cel1ule l</td> 
<td>Cel"lule 2</td> 
</tr> 
</table> 

L' element <caption> confere un intitule au tableau de donnees. 
Exemple <table> plus fourni 

<table> 

<caption>Liste des principaux navigateurs</caption> 

<tbody> 

<tr> 
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<th>Navigateur</th> 
<th>Envi ronnements</th> 
<th>Moteur</th> 
<th>Descri ption</th> 
</tr> 

<tr> 

<tdximg src="ie.png" alt="Internet Exlorer" /><strong>Internet 
Explorer</strongx/td> 
<td>Wi ndows</ td> 
<td>Tn'dent</td> 

<td>Developpe par Microsoft (1995), il est installe d'office avec le 
systeme d' exploitation Wi ndows . </td> 
</tr> 

<tr> 

<tdximg src="opera.png" alt="0pera" /><strong>Opera</strongx/td> 
<td>Linux, Mac <abbr>OS</abbr> X, Windows, BSD, Solaris, Nintendo Wii 
et DS, Symbian, iOS, Android</td> 
<td>Presto</td> 

<td>Developpe par l'editeur de logiciel norvegien Opera Software (1995) 
et est tres populaire pour sa version mobile. </td> 
</tr> 

<tr> 

<tdximg src="fi refox. png" al t="Fi refox" width="40" height="40" /> 
<strong>Fi refox</strongx/td> 

<td>Wi ndows, Mac <abbr>OS</abbr> X et CNU/Li nux</td> 
<td>Cecko</td> 

<td>Navigateur Open Source, developpe et distribue par la Mozilla 
Foundation (2002).</td> 
</tr> 

<tr> 

<tdximg src="safari . png" alt="Safari" /xstrong>Safari</strongx/td> 
<td>Mac OS X, iOS et Wi ndows</td> 
<tdxabbr>HTML</abbr> WebKit</td> 

<td>Installe par defaut pour Mac OS X (Apple) depuis qu'Internet 
Explorer n'est plus developpe par Microsoft sur Mac (2003).</td> 
</tr> 

<tr> 

<tdximg src="chrome . png" alt="Chrome" /xstrong>Chrome</strongx/td> 
<td>Wi ndows, Mac OS X et CNU/Li nux</td> 
<tdxabb r>HTML</abb r> WebKi t</td> 

<td>Produit par Google, Chrome est le dernier navigateur ne (septembre 
2008) .</td> 

</tr> 

</tbody> 
</table> 
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Liste des principaux navigateurs 

Figure 4-51 



Navigateur 


Environ nements 


Moteur 


Description 


Internet 
Explorer 


Windows 


Trident 


Developpe par Microsoft (1995), U est 
installe d'office avec le systeme 
d'exploitation Windows, 




Opera 


Linux, Mac OS 
X, Windows , 
BSD, Solaris., 
Nintendo Wii et 
DS, Symbian, 
iOS, Android 


Presto 


Developpe par I'editeur de logiciel 
norvegien Opera Software (1 995) et 
est tres populaire pour sa version 
mobile. 


• 

Firefox 


Windows, Mac 

OSXet 

GNU/Linux 


Gecko 


Navigateur open-source, developpe et 
distribue par la Mozilla Foundation 
{2002), 


@ 

Safari 


Mac OS X, iOS st 
Windows 


HTML 
WebKit 


Installe par defaut Mac OS (Apple), au 
depart les Macs etaient fournis avec 
Internet Explorer, mais la guerre des 
navigateurs s'etant adoucie (entre IE 
et Netscape), Microsoft decida de ne 
plus developper pour Mac (en 2003) et 
Safari fit son apparition. 


e 

Chrome 


Windows, Mac 

OSXet 

GNU/Linux 


HTML 
WebKit 


Produit par Google, Chrome est le 
dernier navigateur ne (septembre 
2008). 



Tableau 4-99 Attributs specifiques a <table> 



Attribut Valeurs Role 


summary 


texte 


Un resume du contenu de la table herite des precedentes spe- 
cifications HTML, mais il est conseille d'utiliser a sa place 
<capti on> ou d'autres elements texte (detai 1 s, voire 
figure et figcaption). 



Un usage detourne de cet element a ete fait durant de nombreuses annees pour struc- 
turer la presentation des pages web, en lieu et place des feuilles de style CSS. 



Tableau 4-100 Propriet.es de I'element <table> 
Propriete Details 



Modeles de contenu autorises 


Un element <capti on> optionnel, suivi par zero ou plusieurs 
<colgroup>, suivis par un element <thead> optionnel, suivi par 
un <tf oot>, suivi par zero ou plusieurs <tbody> ou un ou plusieurs 
<t r> ou zero ou plusieurs <tbody> ou un ou plusieurs <t r>, suivis par un 
<tfoot>. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 
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Tableau 4-100 Proprietes de I'element <table> (suite) 



Propriete Details 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


table { 

display: table; 
border-collapse: separate; 
border-spacing: 2px; 
border-color: gray; 

} 



<thead> 



Un element <thead> represente un en-tete de tableau, utilise en conjonction avec 
<tbody> et <tfoot>. II doit etre place apres <caption> et <colgroup> s'il y a lieu, et 
avant <tbody> ou <tfoot>. 

Son contenu est constitue d'enfants <tr>, eux-memes constitues d'un ou plusieurs 
<th>. La specification HTML n'autorise pas d'y placer des cellules classiques <td>, 
car il ne s'agit pas de cellules pouvant representer une tete de tableau. 



Propriete 



Tableau 4-101 Proprietes de I'element <thead> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs <tr>. 


Parents autorises 


<table> 


Omission de balise 


La balise ouvrante est obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi 
par <tbody> ou <tf oot>. 


Style par defaut 


thead { 

display: table-header-group; 
verti cal -al i gn : middle; 
border-color: inherit; 

} 



<tfoot> 



Un element <tfoot> represente un pied de tableau, utilise en conjonction avec 
<thead> et <tbody>. On peut y placer zero ou plusieurs <tr>. 

Attention : <tfoot> doit apparaitre avant <tbody> dans le code afin de fournir au 
navigateur les renseignements qu'il detient, avant de charger le reste du contenu. 



183 



HTML 5 - Une reference pour le developpement web 



Propriete 



Tableau 4-102 Proprieties de I'element <tfoot> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs <tr>. 


Parents autorises 


<tabl e> 


Omission de balise 


La balise ouvrante est obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi 
par <tbody>, ou s'il n'y a plus aucun autre contenu dans I'element parent. 


Style par defaut 


tfoot { 

display: table-footer-group; 
verti cal -al i gn : middle; 
border-color: inherit; 

} 



<tbody> 

Un element <body> represente un corps de tableau, utilise en conjonction avec 
<thead> et <tfoot>. II regroupe les lignes <tr> qui contiennent les donnees du 
tableau. Dans ce cas de figure, aucun element <tr> ne peut etre directement enfant 
de <table>. 

Les navigateurs peuvent exploiter cette structuration pour agrementer l'affichage de 
tableaux, particulierement s'ils possedent des dimensions qui excedent la surface de 
visualisation, en maintenant ces elements visibles a 1'ecran independamment des 
lignes, durant le defilement du document. 

Le meme principe peut etre applique a l'impression pour conserver les blocs d'en- 
tete et de pied de tableau, en haut et en bas de chaque page, si ce dernier doit s'etaler 
sur plusieurs pages. 

Usage de <thead>, <tbody>, <tfoot> 

<tabl e> 
<thead> 

<tr> 

<th>Parti ci pant</th> 
<th>Score</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 

<td>Total</td> 
<td>1337</td> 
</tr> 
</tfoot> 
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<tbody> 

<tr> 

<td>Rodol phe</td> 
<td>337</td> 

</tr> 

<tr> 

<td>Raphae"l </td> 
<td>1000</td> 
</tr> 
</tbody> 
</table> 

Feuille de style associee 



caption { 

f ont-styl e : i tal i c ; 
co"lor:#555 ; 

} 

td, th { 

paddi ng : . 5em; 

} 

td { 

border : lpx dashed #aaa; 

} 

th { 

background : #cade5b ; 

} 

tfoot { 

background :#c98fde ; 

} 



Figure 4-52 

Demonstration de thead, 
tbody, tfoot 



articipant Score 



RodoLphe 


337 


Raphael 


1000 







<thead> 



<tbody> 



<tfoot> 
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Propriete 



Tableau 4-103 Proprietes de I'element <tbody> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs <tr>. 


Parents autorises 


<tabl e> 


Omission de balise 


La balise ouvrante peut etre omise si le premier contenu est un <tr>, et si 
I'element n'est pas immediatement precede par <tbody>, <thead> ou 
<tf oot> dont la balise fermante a ete omise. 

La balise fermante peut etre omise si cet element est immediatement suivi 
par <tbody> ou <tf oot>, ou s'il n'y a plus aucun contenu dans I'element 
parent. 


Style par defaut 


tbody { 

display: table-row-group; 
verti cal -al i gn : middle; 
border-color: inherit; 

} 



<tr> 



Un element <tr>(table row) represente une ligne de tableau. II contient un ou plu- 
sieurs elements <td> et/ou <th>. 

Un element <tr> peut etre enfant de : 

• <thead>, et dans ce cas, il ne doit contenir que des <th> ; 

• <tfoot> ; 

• <tbody> ; 

• <table> lorsqu'il n'y a pas d'element <tbody>, apres d'eventuels freres <caption>, 
<col group> et <thead> . 

Utilisation de <tr> 

<tabl e> 
<tr> 

<td>Ligne 1 / Colonne l</td> 

<td>Ligne 1 / Colonne 2</td> 
</tr> 
<tr> 

<td>Ligne 2 / Colonne l</td> 
<td>Ligne 2 / Colonne 2</td> 
</tr> 
</table> 



Figure 4-53 

Tableau a deux lignes 
et deux colonnes 



Ligne 1 / Colonne 1 


Ligne 1 / Colonne 2 


Ligne 2 / Colonne 1 


Ligne 2 / Colonne 2 
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Tableau 4-104 Proprietes de I'element <tr> 



<td> 



Propriete 


Details 


Modeles de contenu autorises 


Zero ou plusieurs occurrences de <td> ou <th>. 


Parents autorises 


<table>, <tbody>, <thead>, <tfoot> 


uriiissiuri ue udiibc 


Ddiise ouvrdrue ouiiyd Loire. 

La balise fermante peut etre omise si cet element est immediatement suivi de 
<tr>, ou s'il n'y a plus aucun autre contenu dans I'element parent. 


Style par defaut 


tr { 

display: table- row; 
verti cal -al i gn : inherit; 
border-color: inherit; 

} 


Une cellule <td> (table 


data) peut contenir du texte et beaucoup d'autres elements 



HTML tels que des liens, des images, des listes, etc. Elle est toujours imbriquee dans 
un element <tr>. 

Utilisation de <td> 

<tabl e> 
<tr> 

<td>Kangourou</td> 
<td>marsupial </td> 
<td>mammi f ere</td> 

</tr> 
</table> 



Figure 4-54 

Tableau a une ligne 
et trois cellules 



Kangourou 



marsupial 



mammifere 



Tableau 4-105 Attributs specifiques a <td> 



Attribut 


Valeurs 


Role 


headers 


identifiants 


Une liste d'identifiants (attribut i d) separes par des espaces 
de cellules en-tetes qui relevent de cette cellule. Utilise par 
les navigateurs non visuels. 


col span 


nombre entier positif 


Nombre de colonnes occupees et fusionnees par cette cellule. 


rowspan 


nombre entier positif 


Nombre de lignes occupees et fusionnees par cette cellule. 
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Usage des attributs colspan et rowspan 

<tabl e> 
<tr> 

<th scope="co"l" col span="2">Animal et groupe</th> 

<th scope="col ">C1 asse</th> 
</tr> 
<tr> 

<td>Kangou rou</td> 

<td>marsupi al </td> 

<td rowspan="2">mammi f ere</td> 
</tr> 
<tr> 

<td>Bal ei ne</td> 
<td>cetace</td> 

<!-- on omet ce td car il est occupe par la cellule de la precedente 
ligne --> 

</tr> 
</table> 

Un style CSS de bordure (border :lpx dashed gray) a ete ajoute sur les elements 
<td> pour visualiser les delimitations : 



Figure 4-55 

Demonstration de I'effet 
colspan et rowspan 



Animal et groupe 


Classe 


Kangourou 


marsupial 


mammifere 


Baleine 


cetace 



Tableau 4-106 Proprietes de I'element <td> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


<tr> 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi de 
<th> ou <td>, ou s'il n'y a plus aucun autre contenu dans I'element 
parent. 


Style par defaut 


td { 

di spl ay : tabl e-cel 1 ; 
verti cal -al i gn : inherit; 

} 
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<th> 

Un element <th> (table header) est une cellule specialisee qui joue le role d'en-tete de 
colonne (ou de ligne) dans un tableau. II doit etre imbrique dans une balise <tr>. 

Utilisation de <th> 

<tabl e> 
<tr> 

<th scope="col ">Animal </th> 
<th scope="col ">Groupe</th> 
<th scope="col ">Classe</th> 

</tr> 
<tr> 

<td>Kangou rou</td> 

<td>marsupi al</td> 

<td>mammi fere</td> 
</tr> 
<tr> 

<td>Bal ei ne</td> 
<td>cetace</td> 
<td>mamm"i f e re</td> 
</tr> 
</tabl e> 



Tableau 4-107 Attributs specifiques a <th> 



Attribut Valeurs Role 


scope 


row 
col 

rowgroup 
colgroup 


Specifie les cellules concernees par cette cellule en-tete : 

row : la ligne courante ; 

col : la colonne courante ; 

rowgroup : le groupe de lignes courant ; 

col g roup : le groupe de colonnes courant. 


headers 


identifiants 


Une liste d'identifiants (attribut i d) separes par des espaces 
de cellules en-tetes qui relevent de cette cellule. Utilise par 
les navigateurs non visuels. 


col span 


nombre entier positif 


Nombre de colonnes occupees et fusionnees par cette cellule. 


rows pan 


nombre entier positif 


Nombre de lignes occupees et fusionnees par cette cellule. 



Les attributs col span et rowspan permettent de creer des fusions de cellules respecti- 
vement sur des colonnes et des lignes. II faut done omettre autant d'autres elements 
<th> dans le parent que de colonnes (ou de lignes) fusionnees. 
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Tableau 4-108 Proprieties de I'element <th> 


Propriete 


Details 


Modeles de contenu autorises 


Contenu de phrase. 


Parents autorises 


<tr> 


Omission de balise 


Balise ouvrante obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi de 
<th> ou <td>, ou s'il n'y a plus aucun autre contenu dans I'element 
parent. 


Style par defaut 


th { 

di spl ay : tabl e-cel 1 ; 
verti cal -al i gn : inherit; 
font-weight: bold; 
text-align: center; 
} 



<caption> 

La vocation de <capti on> est d'attribuer une legende ou un titre a un tableau de 
donnees. II doit etre insere immediatement apres la balise ouvrante <tabl e>, et ne 
doit etre utilise qu'une seule fois au sein de cet element. 

Utilisation de <caption> 

<table> 

<capt i on>Cl assification ani mal e</capt i on> 

<tr> 

<th scope="col">Ani mal </th> 

<th scope="co"l ">Groupe</th> 

<th scope="col">CT asse</th> 
</tr> 
<tr> 

<td>Kangourou</td> 

<td>marsupi al </td> 

<td>mammi f ere</td> 
</tr> 
<tr> 

<td>Bal ei ne</td> 
<td>cetace</td> 
<td>mammi f ere</td> 
</tr> 
</table> 
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Feuille de style associee 



caption { 

f ont-styl e : i tal i c ; 
color:#555; 

} 

td, th { 

paddi ng : . 5em; 

} 

td { 

border: lpx dashed #aaa; 

} 

th { 

background : #cade5b ; 

} 



Figure 4-56 



Classification animate 



Animal Groupe Classe 


Kangourou 


marsupial 


mammifere 


Baleine 


cetace 


mammifere 



Propriete 



Tableau 4-109 Proprietes de I'element <caption> 
Details 



Modeles de contenu autorises 


Contenu de flux. 


Parents autorises 


<table> 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


caption { 

display: table-caption; 
text-align: center; 

} 



<colgroup> 



Un element <colgroup> place en debut de <table> est utilise pour specifier des pro- 
prietes communes a un groupe de colonnes. Ces proprietes seront inspirees depuis les 
attributs affectes a <colgroup>, tels que style. Elles seront affectees au nombre de 
colonnes indique par l'attribut span . 

II doit etre place avant tout usage de <thead>, <tbody>, <tfoot>, et <tr>. 
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Tableau 4-110 Attributs specif iques a <colgroup> 



Attribut 


Valeurs 


Role 


span 


nombre entier positif Nombre de colonnes auxquelles appliquer les proprietes. 



Exemple d'usage de <colgroup> 

<table> 

<col group span="2" style="background:lightgray"x/colgroup> 

<tr> 

<td>Cellule 1 de la colonne l</td> 

<td>Cellule 1 de la colonne 2</td> 

<td>Cellule 1 de la colonne 3</td> 
</tr> 
</table> 

Feuille de style associee 

caption { 

font-styl e : i tal i c ; 
color:#555; 

} 

td { 

padding:0. 5em; 

border: lpx dashed #aaa; 

} 

th { 

background : #cade5b ; 

} 



Figure 4-57 

Demonstration 
de I'effet colgroup 



Cellule 1 de la 


Cellule 1 de la 




Cellule 1 de la 


colonne 1 


colonne 2 




colonne 3 



Propriete 



Tableau 4-1 1 1 Proprietes de l'element <colgroup> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs <col>, ou un attribut span optionnel. 


Parents autorises 


<table> 


Omission de balise 


La balise ouvrante peut etre omise si le premier contenu est un element 
<col >, et si l'element n'est pas immediatement precede par un autre 
<colgroup> dont la balise fermante a ete omise. 
La balise fermante peut etre omise si cet element n'est pas immediatement 
suivi par une espace ou un commentaire. 
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Tableau 4-111 Proprietes de I'element <colgroup> (suite) 



Propriete 


Details 


Style par defaut 


colgroup { 

display: table-column-group; 

} 



<col> 



Une enumeration d'un ou plusieurs elements <col> definit des proprietes indivi- 
duelles pour chacune des colonnes, prenant la priorite sur celles indiquees par le 
parent <colgroup>. 

Exemple d'usage de <col> 

<tabl e> 

<colgroup span="2" style="background:lightgray"> 
<col style="width: 50px; background :darkgray"> 
<col style="width:100px"> 

</colgroup> 



<tr> 

<td>Cel 1 ul e 
<td>Cel 1 ul e 
<td>Cel 1 ul e 

</tr> 
</table> 



1 de la colonne l</td> 
1 de la colonne 2</td> 
1 de la colonne 3</td> 



Feuille de style associee 

caption { 

f ont-styl e : i tal i c ; 
color:#555; 

} 

td { 

paddi ng : . 5em; 
border:lpx dashed #aaa; 

} 

th { 

background : #cade5b ; 

} 



Figure 4-58 

Demonstration de I'effet col 





Cellule 1 


1 de la 


de la 


colonne 


colonne 


1 


2 ■ 
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Tableau 4-112 Attributs specifiques a <col> 



Attribut 


Valeurs 


Role 


span 


nombre entier positif Nombre de colonnes auxquelles appliquer les proprietes. 



Exemple d'usage alternatif de <col> 

<tabl e> 
<col group> 

<col style="width: 50px"> 

<col style="width:200px;background:lightgray" span="2"> 

</col group> 
<tr> 

<td>Cellule 1 de la colonne l</td> 
<td>Cellule 1 de la colonne 2</td> 
<td>Cellule 1 de la colonne 3</td> 
</tr> 
</table> 



Feuille de style associee 

caption { 

f ont-styl e : i tal i c ; 
color:#555; 

} 

td { 

padding:0. 5em; 

border: lpx dashed #aaa; 

} 

th { 

background : #cade5b ; 

} 



Figure 4-59 

Demonstration de I'autre effet 
col 




Tableau 4-113 Proprietes de I'element <col> 



Propriete Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


<colgroup> 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 
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Tableau 4-113 Proprietes de I'element <col> (suite) 



Propriete 


Details 


Style par defaut 


col { 

display: table-column; 

} 



Elements interactifs 



<menu> 



Dans le cadre du developpement d'applications web, la transposition d'elements 
d'interface auxquels les utilisateurs sont deja habitues est un reel besoin. En effet, 
tous les systemes d'exploitation adoptent depuis bien longtemps le principe des 
menus de commandes pour controler une application. Ceux-ci peuvent consister en 
une barre d'outils classique, un menu contextuel ou une liste d'actions. 

Lelement <menu> fut introduit par HTML 2.0, puis declare obsolete en HTML 4 
en faveur d'<ul>. Son usage a entierement ete redefini pour repondre aux recentes 
necessites, mais sa prise en charge reste absente a l'heure actuelle. 



Attribut 



Tableau 4-114 Attributs specifiques a <menu> 
Valeurs 



type 
nouveau 


tool bar 
context 


Type du menu : 

tool bar : barre d'outils ; 

context : menu contextuel. 

Si cet attribut est omis, le menu represents une liste de com- 
mandes qui ne sont ni une barre d'outils ni un menu contex- 
tuel. 


label 
nouveau 


chaTne de caracteres 


Designation du menu. 



type 

Dans le cas d'un menu contextuel defini par type=" context", l'utilisateur ne peut 
exploiter les commandes que si ce menu est active, c'est-a-dire plus prosaiquement 
par un clic droit sur la plupart des systemes d'exploitation. II doit egalement etre lie a 
un autre element via son attribut contextmenu. 
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Exemple de menu contextuel 

<form> 

<1 abel for="pseudo">Pseudo</l abel > 
<input id="pseudo" name="pseudo" type="text" 
contextmenu="menucontextuel "> 

<menu type="context" id="menucontextuel "> 

<command label="Tradui re" onclick="traduction() ; "> 
<command label="Verifier la di sponi bi 1 ite" 
onclick="verification() ; "> 

</menu> 
</form> 

Dans le cas d'une barre d'outils type="tool bar", toutes les commandes sont accessi- 
bles directement. 



label 



L'attribut label confere un intitule au menu et -surtout- a ses sous-menus, pour 
lesquels cette valeur est utilisee en tant qu'intitule visible dans le menu parent. 



Propriete 



Tableau 4-115 Propriet.es de I'element <menu> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs <1 i >, ou contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 

Ne doit pas apparaTtre en tant que descendant de <a> ou <button> si 
l'attribut type porte la valeur tool bar. 


Style par defaut 


menu { 

display: block; 
list-style-type: disc; 
-webki t-margi n-start : Opx; 
-webki t-margi n-before : lem; 
-webki t-margi n-after : lem; 
-webki t-margi n-end : 0; 
-webki t-paddi ng-start : 40px; 

} 



Exemple d'usage de <menu> 

<menu type="tool bar"> 

<li> 

<menu label="Fichier"> 

<input type="button" val ue="Nouveau" onclick="nouveau()"> 

<input type="button" val ue="0uvri r" one! i ck="ouvri rQ "> 
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<input type="button" va"lue="Enregistrer" oncl i ck="enregi strer() "> 
<input type="button" value="Fermer" oncl i ck="f ermer() "> 
</menu> 

</"li> 

<li> 

<menu label ="Edition"> 

<input type="button" val ue="Couper" oncl "i ck="couper() "> 
<input type="button" val ue="Copi er" oncl "i ck="copi er() "> 
<input type="button" val ue="Col 1 er" oncl i ck="coll er() "> 
</menu> 
</li> 
</menu> 

La construction de menu autorise plusieurs possibilites : 

• un autre element <menu> de meme nature (toujours equipe d'un attribut label) 
pour constituer un sous-menu ; 

• un separateur <hr> entre groupes de commandes (les separateurs multiples se 
voient fusionnes ; ceux places en debut ou en fin de liste sont ignores) ; 

• tous types d'elements considered comme des commandes (a, button, input, 
command, option) et autres en conjonction avec l'attribut (accesskey). 

< command > nouveau 

L'element <command> incarne une commande individuelle d'un <menu>. II peut s'agir 
d'un bouton classique, d'une case a cocher ou d'un bouton radio. Une commande 
declenche une action de script, la plupart du temps grace a un des evenements DOM 
que Ton peut y associer, tels que oncl i ck ou onchange. 

Exemple d'usage de <command> 

<scri pt> 

function heure() { 
var d = new Date() ; 
alert(d) ; 

} 

</scri pt> 
<menu> 

<command oncl ick="heure() ; ">Quel 1 e heure est-il ?</command> 

</menu> 



Tableau 4-116 Attributs specifiques a <command> 



Attribut Valeurs Role 


checked 


checked ou "" ou 
(vide) 


Etat initial (coche ou non). 

N'est valable que pour un type radio ou checkbox. 
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Tableau 4-116 Attributs specifiques a <command> (suite) 



Attribut 


Valeurs 


Role 


di sabl ed 


di sabl ed ou " " 
ou (vide) 


Etat initial (desactive ou non). 


icon 


URL 


Adresse d'une image servant d'icone pour cette commande. 


label 


chaine de texte 


Intitule de la commande, affiche en tant qu'indication a I'uti- 
lisateur. 


type 


checkbox 
radi o 
command 


Type de la commande (command par defaut si aucune valeur 
type n'est specifiee). 


radiogroup 


chaine de texte 


Specifie le nom d'un groupe de commandes radio qui seront 

activees/desactivees de concert. 

N'est a utiliser que si la commande est de type radio. 



Dans l'exemple suivant, une barre d'outils est associee a une zone d'edition <textarea>. 

Exemple d'usage de <command> plus avance 

<textarea contextmenu="mi seenforme"x/textarea> 



<menu type="tool bar" id="miseenforme"> 

<command type="radio" radiogroup="alignement" label="Gauche" 
i con="i cones/g . png" oncl i ck="al i gnement ( ' gauche ' ) " checked> 

<command type="radio" radiogroup="alignement" label="Centre" 
i con="i cones/c . png" oncl i ck="al i gnement ( ' centre ' ) "> 

<command type="radio" radiogroup="alignement" label="Centre" 
i con="i cones/d . png" oncl i ck="al i gnement ( ' droi te ' ) "> 

<hr> 

<command type="checkbox" checked label="Gras" icon="icones/gras.png" 
onclick="gras()"> 

<command type="checkbox" checked label="Italique" 

i con="i cons/i tali que. png" oncl ick="i tali que ()"> 
<command type="checkbox" checked label ="Souligne" 

i con="i cons/soul i gne . png" oncl i ck="soul i gne() "> 

</menu> 

Bien qu' aucune apparence ne soit formellement definie et que tout style puisse etre 
applique a l'aide des proprietes CSS, cet exemple pourrait ressembler a une barre 
d'outils telle que Ton peut en rencontrer dans des editeurs de texte. 



Figure 4-60 

Rendu imaginaire 
de la barre d'outils 



G / S 



=e m } <menu> 



<command> 
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Tableau 4-117 Proprietes de l'element <command> 



Propriete 


Details 


Modeles de contenu autorises 


Element vide. 


Parents autorises 


Tout element pouvant contenir des elements de metadonnees ou de phrase. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



<details> <nouveau> 

L'element <detai 1 s> represents un composant d'interface devoilant une information 
ou des controles supplementaires a l'utilisateur. 

C'est une fonctionnalite que Ton retrouve dans la plupart des interfaces graphiques 
utilisateurs des systemes d'exploitation sous la forme d'une icone - par exemple un 
signe « plus » ou une fleche - eventuellement accompagnee d'un titre. Un clic sur 
I'icone ou son intitule texte doit deployer un groupe d'informations supplementaires 
masquees par defaut. 

Exemples d'usage de <details> 

<footer> 
<detail s> 

<summary>Contenu sous licence Creative Commons</summary> 
<p>Vous etes libres de reproduire, distribuer et communiquer cette 
creation au public et de la modifier ; vous devez citer le nom de 
l'auteur original de la maniere indiquee par l'auteur de l'oeuvre ou le 
titulaire des droits qui vous confere cette autori sati on . </p> 

</detail s> 
</footer> 

Tableau 4-118 Attributs specifiques a <details> 



Attribut Valeurs Role 


open 


open ou "" ou 
(vide) 


Specifie la visibilite initiale de l'element (visible a l'utilisateur 
ou invisible). 



L'attribut open definit l'etat d'affichage par defaut, et peut etre manipule au travers 
d'un script si necessaire. S'il est ajoute, les details doivent etre affiches a l'utilisateur. 
S'il est retire, les details sont masques. 

Exemple d'usage avance de <details> 

<f i gure> 

<img src="IMG_4303 . jpg" alt="Epices indiennes"> 
<details open> 



199 



HTML 5 - Une reference pour le developpement web 



<summary>Photo au format JPEG avec EXIF</summary> 
<dl> 

<dt>Prise de vue:</dt> <dd>23/10/2006</dd> 
<dt>Focal e : </dt> <dd>85mm</dd> 
<dt>Dimensi ons : </dt> <dd>3456x2304</dd> 
<dt>Exposi ti on : </dt> <dd>l/640</dd> 
<dt>ISO:</dt> <dd>100</dd> 
</dl> 
</detail s> 
</figure> 



Figure 4-61 

Possibility de rendu 
des elements <details> 
et <summary> 






1 


— j Photo au format JPEG avec EXIF 






1 


■ Prise de vue: 


23/10/2006 


Focale: 


85mm 




Dimensions: 


3456x2304 


Exposition: 


1/640 




ISO: 


100 








J 



Dans cet exemple, les details relatifs a la photographie sont masques. Le deploiement 
des informations complementaires fait apparaitre une liste de definitions. 

Autre exemple d'usage avance de <details> avec controles 
<details open> 

<summaryxl abel for="f i chi er">Nom du fichier</labelx/summary> 
<pxinput type="text" id="fichier" name="fi chi er"x/p> 

</detail s> 

<detail s> 

<summaryxl abel>Compressi on</l abelx/summary> 
<ul > 

<input type="radio" value="jpeg" id="comp_jpeg"> 
<1 abel f or=" comp_j peg"> J PEC</1 abel x/1 i > 
<input type="radio" value="png" id="comp_png"> 
<1 abel for="comp_png">PNG</l abel x/1 i > 
<input type=" radio" value="gif" id="comp_gif"> 
<1 abel f or="comp_gi f ">CIF</1 abel x/1 i > 
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</ul> 
</detail s> 
<detail s> 

<summaryxl abel for="ql ">Qual i te</l abelx/summary> 
<pxinput type="range" min="0" max="100" name="ql" id="ql"x/p> 
</detail s> 



Figure 4-62 

Possibility de rendu 
des elements <details> 
et <summary> 



Nom du fichier 



Nom du fichier 



► Compression 

► Qualite 



▼ Compression 

m jpeg 

<f) PNG 
Q GIF 
© WebP 



Qualite 

— D- 



50% 



Dans cet exemple, le premier element est deploye par defaut grace a la presence de 
1'attribut open. 

Tableau 4-119 Proprietes de I'element <details> 
Propriete Details 



Modeles de contenu autorises 


Un element <summary> optionnel, suivi par du contenu de flux. 


Parents autorises 


Tout element pouvant contenir des elements de flux sauf <a> et 
<button>. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


details { 

display: block; 

} 



Le support de <detai 1 s> est limite, mais il existe une alternative en JavaScript et 
jQuery proposee par Mathias Bynens. 



RESSOURCE Validateurs HTML 

Bulletproof HTML 5 <details> fallback using jQuery 
► http://mathiasbynens.be/notes/html5-details-jquery 



201 



HTML 5 - Une reference pour le developpement web 



<summary> nouveau 

L'intitule d'un element <details> peut etre specifie par <summary>. S'il est absent, 
l'agent utilisateur doit determiner lui-meme le titre a donner a <detai 1 s>. 

Le contenu texte de <summary> est cense refleter un titre pertinent, une legende ou 
un resume pour son parent qui est obligatoirement un element z<details>. Par 
defaut, le principe est d'afficher cet intitule, et de ne devoiler le reste du contenu 
qu'apres l'avoir active - clique dessus - ou si l'attribut open de <detai 1 s> est present 
des le chargement de la page. 

Exemple d'usage de <summary> 



<detai 1 s> 

<summary>Titre ou resume des detail s</summary> 

<!-- Contenu varie --> 
</detai 1 s> 



Propriete 



Tableau 4-120 Proprietes de I'element <summary> 
Details 



Modeles de contenu autorises Contenu de phrase. 


Parents autorises 


<details> 


Omission de balise 


Balises ouvrante et fermante obligatoires. 


Style par defaut 


summary { 

display: block; 

} 



<dcvicc> nouveau> 

Cet element est encore en cours de formalisation. II devrait permettre a terme de 
manipuler des peripheriques tels que des webcams pour effectuer des captures video. 



Scripting 



<script> 



L' element <script> embarque une serie d'instructions ecrites dans un langage de 
script execute par l'agent utilisateur, si celui-ci le supporte. 
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Ne le cachons pas, le langage de script du Web est JavaScript. Bien qu'il soit possible de 
preciser d'autres types de langages, et qu'il y ait eu une tentative d'incursion de VBS- 
cript dans Internet Explorer par Microsoft, le seul idiome universel reste JavaScript. 



Tableau 4-121 Attributs specifiques a <script> 



Attribut 


Valeurs 


Role 


type 


type MIME 


Definit le type MIME du langage de script utilise : 

text/javascri pt (par defaut) ; 

text/ecmasc ri pt ; 

appl i cati on/ecmascri pt ; 

application/javascript ; 

Cet attribut est optionnel avec HTML 5. 


src 


URL 


Adresse de la ressource externe a charger. Si cet attribut est 
precise, I'element doit rester vide et ne contenir aucun code 
de script entre la balise ouvrante et la balise fermante. 


charset 


encodage 
des caracteres 


Declaration de la page de codes qui doit etre utilisee pour 
Interpretation du script externe, si celle-ci est differente de 
I'ASCII. Doit refleter I'en-tete HTTP Content-Type delivre par 
le serveur pour le fichier. 

Ne doit etre utilise que si I'attribut s rc est present. 


async 
nouveau 


async 


Active le mode d'execution asynchrone du script. 
Ne doit etre utilise que si I'attribut s rc est present. 


defer 


defer 


Indique que le script n'aura a priori aucune incidence sur le 
contenu du document et que le navigateur peut continuer a 
charger la page sans attendre le script, puis I'executera a la fin. 
Ne doit etre utilise que si I'attribut s rc est present. 



Exemple d'usage de <script> interne a la page 



<script> 

al ert("Voi ci un script execute"); 
</script> 

Exemple d'usage de <scri pt> interne a la page influencant le contenu du document 

<p>Nous sommes en "I 'an 
<script> 

// Affichage de l'annee courante dans un paragraphe Q 

var d = new DateO 

document .wri te(d . get Full Year O) ; 

</script> 

</p> 
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Tableau 4-122 Proprietes de I'element <script> 



Propriete 

Modeles de contenu autorises 



Details 




Absence de I'attribut src : texte (code JavaScript). 
Presence de I'attribut s rc : texte pouvant etre constitue seulement de carac- 
teres espaces (nouvelle ligne, tabulation, espace) et de commentaires Java- 
Script (simple ligne // ou multiligne /* ... */). 



Parents autorises 



Tout element pouvant contenir des elements de metadonnees ou de phrase. 



Omission de balise 



Balises ouvrante et fermante obligatoires. 



Style par defaut 



script { 



display: none; 

} 



Script externe a la page HTML 

La balise permet egalement de charger un fichier externe, de preference dote de 
l'extension .js, contenant les instructions plutot que de les placer dans la page 
meme. Cela a pour avantage d'autoriser le partage et la mise en cache d'un meme 
fichier de ressources sur tout ou partie d'un site. Dans ce cas de figure, le fichier 
externe ne doit contenir que du code JavaScript sans aucune balise <script>. 

Exemple d'usage de <scri pt> avec appel a un fichier externe 

<scri pt src=" javascri pt . js"x/scri pt> 

Contenu du fichier javascript.js 

| a1ert("Voici un script execute"); 

Les instructions JavaScript peuvent etre placees a tout endroit du document. Cette 
facon de faire Q n'est pas optimale, car elle peut se reveler bloquante et peu acces- 
sible. Par defaut, le navigateur suit un mode d'execution classique et attend de dis- 
poser de toutes les instructions JavaScript pour poursuivre l'interpretation du docu- 
ment. Ce comportement peut introduire une latence importante a l'affichage si la 
balise <script> fait appel a un fichier externe grace a I'attribut src, et que celui-ci ne 
se charge pas instantanement. 

Deux attributs modulent le comportement du navigateur vis-a-vis de cette balise 
pour obtenir de meilleures performances de rendu et ne pas interrompre le moteur 
d'analyse syntaxique. Leur support est inegal, il ne faut done pas presumer qu'ils 
seront equitablement respectes sur tous les navigateurs. 
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Execution asynchrone 

L'attribut booleen async indique au navigateur d'executer le script de facon asyn- 
chrone, c'est-a-dire des qu'il est disponible, avant meme le declenchement de I'eve- 
nement load de l'objet window. Cela signifie que les scripts utilisant cet attribut peu- 
vent etre interpreted dans le desordre et non par rapport a l'ordre dans lequel ils 
apparaissent dans le code de la page. 

<script async src="javascript. js"x/script> 

Execution differee 

L'attribut defer differe l'execution du script a la fin du chargement de la page, mais il 
preserve l'ordre d'execution contrairement a async. II signale au navigateur que son 
interpretation peut etre declenchee en derniere instance juste apres I' analyse HTML, 
mais avant I'evenement DOMContentLoaded. 

<script defer src="javascript. js"x/script> 

Pour decouvrir le langage JavaScript et ses possibilites, reportez-vous a des ouvrages 
specialises ou au chapitre DOM. 

< noser ipt> 

L element <noscript> recueille un contenu alternatif (generalement un avertisse- 
ment) si le langage de script : 

• est desactive par l'utilisateur ; 

• est indisponible - n'est pas supporte - dans le navigateur. 
Exemple d'usage de <noscript> 

<scri pt> 

al ert(" JavaScri pt est active"); 
</scri pt> 

<noscript>Ce navigateur ne supporte pas JavaScript ou "I 'a desactive</ 
noscript> 

Un navigateur ne reconnaissant pas la balise <script> et son contenu affichera celui 
de <noscri pt>. C'est un element qui ne doit pas etre utilise dans le cadre d'une syn- 
taxe XML. 
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Propriete 



Tableau 4-123 Proprieties de I'element <noscript> 
Details 



Modeles de contenu autorises 


Un ou plusieurs elements <1 i nk> ou un element <meta http- 
equiv="default-style"> ou un element <meta http- 
equiv="ref resh"> ou un element <style> 
ou contenu de phrase ou de flux, sauf <noscri pt>. 


Parents autorises 


Tout element pouvant contenir des elements de metadonnees, de phrase ou 
de flux. 


Omission de balise 


Balises ouvrante et fermante obligatoires. 



Attributs HTML globaux 

Les elements HTML disposent : 

• D'attributs specifiques, presentes dans la description individuelle de chaque ele- 
ment. Par exemple, src indique l'adresse du fichier image necessaire pour <img>. 
Une balise peut aussi ne pas disposer d'attributs specifiques, c'est entre autres le 
cas de <div>, <span> ou <em>. 

• D'attributs globaux, qui sont communs a tous les elements, mais qui peuvent 
aussi etre sans effet sur certains d'entre eux. 



Tableau 4-124 Attributs globaux 



Attribut 


Valeurs 


Role 


accesskey 


code(s) de touches 
d'acces 


Touche d'acces direct pour la navigation au clavier. 


class 


chame de caracteres 


Classes associees a I'element. 


contextmenu 
<nouveau> 


identifiant de I'ele- 
ment <menu> a 
associer 


Reference au menu contextuel de I'element. 


contentedi tab! e 
<nouveau> 


true ou fal se ou 
"" ou sans valeur 


Rend le contenu de I'element editable. 


data-* 




A proprement parler, il ne s'agit pas d'un attribut. 


di r 


ou ou 

auto 


Direction d'ecriture du texte : 

1 1 r : de gauche a droite (left to right) ; 

rtl : de droite a gauche (right to left). 


draggable 
<nouveau> 


true ou fal se ou 
"" ou sans valeur 


Permet le deplacement de I'element dans le cadre du glisser- 
deposer (drag & drop). 
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Tableau 4-124 Attributs globaux (suite) 



Attribut 



Valeurs 



dropzone 
nouveau 


copy 
move 
link 
s : chaine 
de caracteres 
f : chaine 
de caracteres 


Permet de defmir le comportement lors d un depot sur 1 ele- 
ment dans le cadre du glisser-deposer. 






hi dden 
nouveau 


hidden ou "" ou 
sans valeur 


Indique que I'element n'est plus ou n'est pas encore perti- 
nent, et qu'il ne doit pas etre affiche. 


id 


chaine de caracteres 


Identifiant unique de I'element. 


itemid 


chaine de caracteres 


Identifiant unique defini par le vocabulaire du microformat. 


nouveau 






itemprop 


chaine de caracteres 


Propriete individuelle du microformat. 


nouveau 






i temref 


chaTne de caracteres 


Reference a un autre element. 


nouveau 






itemscope 
nouveau 


chaine de caracteres 


Indique que I'element fait appel a un microformat et que ses 
enfants font partie de ce format. 


itemtype 


chaTne de caracteres 


Vocabulaire utilise par le microformat. 


nouveau 






Tang 


code langue 


Langue dans laquelle est redige I'element. 


tabi ndex 


nombre entier 


Ordre de tabulation. 


title 


chatne de caracteres 


Titre descriptif. 


spellcheck 
nouveau 


true ou fal se 


Activation/desactivation de la correction orthographique et/ 
ou grammaticale. 


styl e 


proprietes CSS 


Affectation de proprietes de style a I'element. 



accesskey 

Digne heritier des bonnes pratiques d'accessibilite, l'attribut accesskey associe un 
raccourci clavier a un element. II permet alors, grace a une combinaison precise 
propre a chaque agent utilisateur, d'activer I'element ou de lui donner le focus, c'est- 
a-dire d'en obtenir le controle au clavier. 

Cette astuce revet un cote pratique pour des visiteurs utilisant regulierement ou de 
facon repetitive une fonctionnalite du site ou de l'application web, mais aussi un cote 
accessible pour les utilisateurs naviguant au clavier. 
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Deux liens equipes d'attributs accesskey 

<nav> 
<P> 

<a ti tl e="Retour a la page d'accueil" 
accesskey="A" href="/">Accuei 1 </a> 
<a title="Page de contact" 
accesskey="C" href="/contact/">Contactez-nous</a> 

</p> 
</nav> 

Cet exemple signifie que les touches de caracteres A et C pourront etre associees par 
le navigateur a des combinaisons de touches de contrdle pour acceder directement 
aux liens. Malheureusement, rien n'est defini precisement quant aux associations 
possibles etant donne la grande variete des peripheriques d'entree et des systemes 
d'exploitation disponibles. Ainsi, Ton pourra retrouver la combinaison 
Ctrl + Shift + A, Alt + Shift + A, ou bien encore + A. Cela est d'autant plus vrai que 
des combinaisons de touches peuvent deja etre assignees par defaut a d'autres actions. 
C'est pourquoi Ton recommande d'utiliser de preference les chiffres de a 9. Mais la 
aussi, il n'existe aucune convention quant a l'ordre d'assignation de ces chiffres aux 
actions courantes, par exemple « retour a l'accueil » ou « acces a la recherche ». 

En HTML 4, il n'etait possible d'employer accesskey qu'avec des elements precis 
(<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>) et une seule 
valeur. En HTML 5, c'est devenu un attribut global qui peut comprendre une suite 
de differentes touches separees par des espaces. La premiere disponible sur le clavier 
de l'utilisateur sera retenue. 

Un champ equipe d'accesskey avec valeurs multiples 

<1 abel for="q">Recherche</l abel> 

<input type="search" id="q" name="q" accesskey="r 0"> 

Dans cet exemple, un champ de recherche dispose de deux touches d'acces, « r » et « ». 
Lagent utilisateur pourra envisager d'employer Ctrl + Alt + R avec un clavier classique, 
ou se rabattre sur le s'il est execute sur un terminal mobile avec pave numerique. 

class 

Lattribut class associe une ou plusieurs classes a un ou plusieurs elements. Dans la 
pratique, il ha aucune consequence visuelle ni semantique. Le but est de classifier les 
composants d'un document dans des categories nominees pour : 
• appliquer un style CSS commun a ces elements grace a un selecteur de type 
. cl asse) ; 
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• s'adresser a la collection d'elements en JavaScript/DOM, par exemple grace a la 
fonction getEl ementsByCl assName () . 

La valeur de l'attribut class est une enumeration d'un ou plusieurs noms de classes 
separes par des espaces. 

Un element rattache a une classe 

<p class="coordonnees"> 

<!-- ... --> 
</p> 

Un element rattache a plusieurs classes 

<p class="coordonnees telephone"> 

<!-- ... --> 
</p> 

Une feuille de style CSS imaginaire pour ces classes 

. coordonnees { 

border:2px dashed black; 

} 

.telephone { 

font-si ze : 2em ; 

} 

On recommande de ne pas nommer les classes d'apres l'aspect visuel que Ton sou- 
haite leur conferer avec les styles (ex: .gauche ou .rouge), mais plutot d'apres leur 
usage ou leur valeur semantique. Cela permet de conserver ces memes noms apres 
une modification complete de l'interface graphique et de donner du sens a une lec- 
ture humaine du code source. 

II n'existe pas de convention pour le nommage, mais la communaute des deve- 
loppeurs a souhaite introduire des standards pour divers types d'informations au tra- 
vers de ce que Ton appelle les microformats (voir chapitre 6). 

HTML 4 et HTML 5 n'ont impose aucune limitation quant aux caracteres utilisa- 
bles pour les noms de classe ; en revanche, il est fortement deconseille de les faire 
debuter par un chiffre, car bon nombre de navigateurs le digerent mal. 

contextmenu nouveau 

Lors de l'elaboration d'un menu contextuel avec l'element menu, il est necessaire de 
definir quel element de la page peut y faire appel. Ce lien est etabli avec l'attribut 
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contextmenu, dont la valeur prend le nom de I'identifiant unique (attribut id) du 
menu concerne. 

Un element faisant reference a un menu contextuel 

<menu id="mescommandes"> 

<!-- Definition du menu --> 
</menu> 

<div contextmenu="mescommandes"> 

<!-- ... — > 
</di v> 

Pour prendre connaissance du fonctionnement global des menus contextuels, reportez- 
vous a l'explication sur 1' element <menu> du chapitre 4, section « Elements interactifs ». 

contenteditable <nouveau> 

Comme son nom le suggere, contenteditable correspond a la capacite de modifier 
le contenu de l'element qui porte cet attribut booleen. 

Ne avec l'essor du Web participatif ou tout un chacun doit etre capable d'editer du 
texte et de le mettre en forme sans posseder de notions en HTML, contenteditable 
est la pierre angulaire de la production de contenu avec une interface Wysiwyg. 

Un element article editable 

<article id="monarticle" contenteditable="true">le suis modifiable</article> 

Applique a tout element, principalement de type conteneur (div, p, span, section, 
article...), il transforme le navigateur en editeur web. II appartient ensuite au lan- 
gage de script de proceder a l'enregistrement des modifications en recuperant le con- 
tenu de l'element, notamment avec sa propriete i nnerHTML. 

Valeur HTML de l'element edite 

var codehtml = document. getElementById("monarticle") .innerHTML; 

Les procedures pour sauvegarder ce contenu peuvent etre developpees en Ajax pour 
envoyer la valeur HTML au serveur et la stocker dans une base de donnees, ou grace 
aux API de stockage local telles que Web Storage et Web SQL Database. 

Tableau 4-125 Support de I'attribut contenteditable 



Navigateur 


Version 


Mozilla Firefox 


3.5+ 


Internet Explorer 


5.5+ 
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Navigateur 



Tableau 4-125 Support de I'attribut contenteditable (suite) 

Version 



Apple Safari 


3.1 + 


Google Chrome 


3.0+ 


Opera 


10.0+ 


Android, iOS (iPhone, iPad, iPod), Opera Mini, Opera Mobile 


non 



Compatibility Prise en charge par les navigateurs, une actualite mouvante 

N'hesitez pas a consulter le site d'accompagnement de I'ouvrage pour consulter les tableaux de prise en 
charge par les navigateurs, ils y sont regulierement mis a jour. 



data- <nouveau> 

Associer des donnees aux elements HTML quels qu'ils soient est possible grace a 
une nouveaute de la specification HTML 5, les attributs personnalises prefixes par 
data- pouvant contenir une chaine de texte arbitraire. 

Dans le cadre des applications web, c'est une fonctionnalite bien utile, car elle permet 
de stocker des informations relatives au contenu : 

• sans devoir les placer « a part » dans une structure de donnees (tableau, objet, 
JSON) qui serait liee aux elements par leurs identifiants ; 

• sans devoir faire appel a XHTML et un espace de noms specifique ; 

• sans devoir faire un usage detourne d'attributs possedant deja une valeur 
semantique ; 

• dans plusieurs attributs distincts dont le developpeur peut choisir le nombre ; 

• dans plusieurs attributs dont le developpeur peut choisir le nom, au-dela du pre- 
fixe data- et en veillant a respecter deux criteres : au moins un caractere et pas de 
majuscules ; 

• en conservant un code valide. 

Exemple d'usage d'attributs data-* 

<ul id="membres"> 

<1i data-numero="19193" data-age="24">Simon-K</l i> 
<li data-numero="35513" data-age="23">Okko</l i> 

</ul> 

Ces informations sont naturellement masquees a l'utilisateur et uniquement accessi- 
bles avec un script. LAPI HTML 5 prevoit la propriete dataset de type 
DOMStri ngMap qui a ete inauguree pour l'occasion, mais dont le support n'est pas uni- 
versel (Firefox 6+, Chrome 9+, Opera 11. 1+). 
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En revanche, des fonctions qui existaient prealablement a cette nouveaute, et qui sont uti- 
lisables sur des attributs conventionnels, beneficient d'un support plus vaste - entendez 
par la Internet Explorer 6 compris- en lecture via la methode getAttribute, ou en 
modification via la methode setAttri bute. 

Exemple d'acces JavaScript aux attributs data-* 

<scri pt> 

var membres = document . querySel ectorAll ("#membres li"); 
// En lecture 

var num = membres [0] . getAttribute("data-numero") ; 

// En ecriture 

membres [1] . setAttri bute ("data-age" , "24") ; 

// Avec dataset 

var a = membres [0] .dataset. age; 
a++; 

membres [0] . dataset . age = a; 

// ... est equivalent a 
membres [0] . dataset. age++; 
</script> 

Un attribut data peut aussi contenir un trait d'union, dans ce cas le nom de la pro- 
priete dataset sera converti automatiquement en camel Case, c'est-a-dire en suppri- 
mant ce signe et en ajoutant une majuscule au caractere le suivant immediatement. 

<video id="mavideo" data-info-qual ite="HD"> 

<scri pt> 

i f (document . get El ementByld ("mavi deo") . dataset . i nf oQual i te="HD") { 
// Autres instructions... 

} 

</scri pt> 

Des meta-informations peuvent etre stockees ainsi, dans tous les navigateurs, meme 
les ancetres qui ne supportent pas encore HTML 5. 

dir 

Cet attribut definit la direction d'ecriture du texte d'un element ou du corps de page. 
II peut recevoir trois valeurs : 
• 1 1 r (left to right) : pour les langues ecrites de gauche a droite (par exemple en 
Europe) ; 
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• rtl (right to left) : pour les langues ecrites de droite a gauche (par exemple l'arabe, 
l'hebreu ou le persan) ; 

• auto : determination automatique selon le contexte. 

II est possible de le supplanter avec des proprietes CSS (di rection, unicode-bidi), 
mais il est recommande de preferer l'attribut di r qui reste actif meme si la feuille de 
style n'est pas appliquee ou desactivee. Cet attribut est obligatoire pour l'element 
<bdo>. Notez qu'il n'aura aucun effet pour le nom du groupe ABBA. 

draggable nouveau> 

Cet attribut ne signifie pas que votre element HTML est celibataire et inscrit sur un 
site de rencontres, mais bien que Ton peut le deplacer d'un endroit a l'autre sur la 
page. II s'agit d'un attribut booleen, pouvant par consequent porter les valeurs true 
(deplacable) ou false (non deplacable). Un troisieme etat, nomme auto, et corres- 
pondant a l'absence de l'attribut, laisse le navigateur determiner l'etat par defaut. 

Cela peut sembler bien pratique, en revanche il ne faut pas oublier que pour toute 
mise en place de glisser-deposer, il faudra prendre en charge les evenements en 
JavaScript et maitriser la totalite de l'operation. 

Exemple d'usage de l'attribut draggable 

<img src="orni thorynque.jpg" draggable="true"> 

dropzone nouveau 

L'attribut dropzone definit la possibilite de deposer un objet par cliquer-deposer sur 
l'element qui le porte. 

Reportez-vous au chapitre 1 1 sur le glisser-deposer pour en savoir plus sur les attri- 
buts draggable et dropzone. 

hidden nouveau> 

La presence de l'attribut hidden indique que l'element dont il depend n'est plus (ou 
n'est pas encore) pertinent, et qu'il ne doit pas etre rendu (affiche) par le navigateur. 

Attention, il ne s'agit pas de mimer l'usage des feuilles de style et de la propriete 
display: none qui ne releve que de la presentation, mais bien d'affecter une valeur 
semantique particuliere. Les situations dans lesquelles il n'est pas prevu d'utiliser 
l'attribut hidden peuvent done etre un systeme d'onglets ou de menu deroulant. 
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Exemple avec application en deux etapes 

<section i d="etapel"> 

<!-- Un formulaire requerant validation --> 
</section> 

<section id="etape2" hidden> 

<!-- Une section ne pouvant (par exemple) etre utilisee que si l'etape 
1 a ete validee --> 
</secti on> 

Un script peut tout a fait agir sur cette propriete et la modifier pour symboliser un 
changement d'etat. 

Modification de I'attribut hidden 

<scri pt> 

document. getElementByld('etapel') .hidden = true; 
document . getEl ementById( ' etape2 '). hidden = false; 
</script> 

Etant donne que celui-ci fait directement partie du code HTML, il peut egalement 
renseigner plus efficacement les robots des moteurs de recherche sur les zones du 
document qu'il est inutile d'indexer, car ceux-ci ne tiennent pas (encore) compte des 
feuilles de style attachees au document ou des instructions JavaScript susceptibles 
d'agir sur la visibilite du contenu. 



L'attribut i d permet de nommer un element de facon unique. II n'a aucune conse- 
quence visuelle ni semantique, et n'est destine qua faire reference a cet element : 

• en HTML pour le « lier » a d'autres elements ; 

• avec les adresses web dotees d'ancres (par exemple page . html #i d) pour cibler spe- 
cifiquement un fragment du document ; 

• en JavaScript pour interagir avec lui (par exemple, avec la methode 
getEl ementByld) ; 

• en CSS pour lui appliquer des proprietes de style (via un selecteur de type #i d au 
sein du document lui-meme ou dans une feuille de style externe). 

Le premier usage se retrouve concretement avec les balises <label> qui sont liees a 
un element de formulaire grace a leur attribut for, reprenant la valeur de l'identifiant. 
Par nature, il ne peut exister deux elements possedant le meme identifiant unique 
dans le document, l'attribut cl ass est alors plus approprie. 

La valeur d'un attribut i d doit consister en au moins un caractere et ne doit contenir 
aucune espace. 
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En HTML 4, les valeurs des attributs i d et name devaient se conformer a des regies 
strictes : toujours debuter par une lettre (a-z) suivie d'autres lettres, chiffres (0-9), 
traits d'union ("-"), souligne ou underscore ("_"), deux-points (":") ou points ("."). 

En HTML 5, les restrictions ont ete levees sur les caracteres utilisables (a peu pres 
tout est autorise), mais il est toujours conseille pour des raisons de compatibilite de 
faire au plus simple et d'eviter les folies avec les caracteres alphanumeriques non 
ASCII ou les signes de ponctuation. Cela epargne d'autant plus les problemes poten- 
tiels lors de l'ecriture de selecteurs CSS ou de l'appel a des fonctions JavaScript. 

Exemples d'usage de I'attribut id 

<p id="intro-document">Ceci est 1 ' i ntroducti on</p> 
<P> 

<label for="prenom"> 

<input type="text" name="prenom" id="prenom"> 

</p> 

<section id="contact"><! -- Autres balises... --></section> 

Une feuille de style correspondante 

#intro-document { 

background : snow4 ; 
color :#fff; 
} 

Un extrait JavaScript imaginaire 

<scri pt> 

var val prenom = document. getElementById("prenom") .value; 
al ert(val_prenom) ; 
</scri pt> 



itemid, itemref, itemscope, itemtype, itemprop nouveau> 

Ces attributs sont mis en oeuvre dans le cadre des microformats avec HTML 5 (voir 
chapitre 6). 



lang 



Lattribut 1 ang definit la langue utilisee pour le contenu phrase d'un element, c'est-a- 
dire la langue dans laquelle est redigee le document ou une portion de celui-ci. II 
porte comme valeur un code langue normalise sur deux ou trois caracteres. 
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Reference Liste des codes de langue 

Les codes d'identification de langue sont references a la RFC BCP (Best Current Practice) 47 de I'lETF. 

► http://www.ietf.org/rfc/bcp/bcp47.txt 

Elle est derivee de la liste des codes internationaux qui est officiellement maintenue par la Librairie du 
Congres des Etats-Unis. 

► http://www.loc.gov/standards/iso639-2/php/code_list.php 



Linteret de cette declaration est multiple, car elle permet : 

• aux synthetiseurs vocaux de determiner quelle prononciation employer, et sur 
quels reglages predefinis ou dictionnaires se baser ; 

• aux correcteurs orthographiques - inclus desormais dans la plupart des 
navigateurs - de se referer au bon dictionnaire ; 

• au navigateur d'employer les polices et jeux de caracteres appropries ; 

• aux robots des moteurs de recherche d'indexer le document plus efficacement. 

Cet attribut peut etre applique sur tout element de la page pour indiquer un change- 
ment de langue local, par exemple sur un <div> ou sur un paragraphe <p> precis, ou 
bien sur tout le document lorsqu'il est applique a la racine <htm"l>. 

Declaration de langue dans une portion de paragraphe 

<p>Sheldon Cooper a dit un jour <q lang="en">I ' m the Doppler Effect !</qx/p> 

tabindex 

La navigation au clavier est plus courante que Ton ne peut le penser. Qui n'a pas deja 
utilise la fameuse touche de tabulation (tab) pour passer d'un champ a l'autre d'un 
formulaire afin d'eviter d'avoir a ressaisir la souris ? 

Par defaut, le navigateur assigne un ordre qu'il pense logique (basiquement derive de 
l'ordre d'apparition des balises HTML), a tous les elements pouvant recevoir le focus sur la 
page. II s'agit principalement des liens (a, 1 i nk), des boutons (i nput, button), des champs 
de formulaires (input, select, textarea), des elements de commande (command), des 
zones d'une image map (area), des elements deplacables (attribut drag gab 1 e). 

Dans certains cas de figure, il peut etre utile de changer cet ordre, pour refleter une 
succession plus intuitive a I'ecran selon la disposition des controles, qui peut etre 
radicalement differente de l'ordre d'apparition dans le code. 

Ajouter un attribut tabi ndex sur un element lui confere la possibilite (ou non) de rece- 
voir le focus, dans une sequence de navigation numerotee. L'ordre de « tabulation » est 
relatif a la valeur que Ton attribue et qui doit toujours etre un nombre : 
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• Entier negatif : l'agent utilisateur doit permettre a l'element de recevoir le focus, 
mais pas de l'atteindre via la sequence normale de navigation. 

• Zero : l'agent utilisateur doit permettre a l'element de recevoir le focus dans la 
sequence normale de navigation en determinant son ordre d'apres les conventions 
du systeme d'exploitation hote. 

• Entier positif : l'agent utilisateur doit permettre a l'element de recevoir le focus 
dans la sequence normale de navigation en determinant son ordre relativement 
aux autres elements. 

Les regies d'etablissement de la sequence pour un element avec un tabindex de 
valeur entiere positive sont les suivantes, il doit recevoir le focus : 

• avant tout element dont l'attribut tabindex a ete omis ou possede une valeur 
erronee ; 

• avant tout element dont l'attribut tabi ndex est egal ou inferieur a zero ; 

• apres tout element dont l'attribut tabi ndex est superieur a zero, mais inferieur a la 
valeur de l'element courant ; 

• apres tout element dont l'attribut tabi ndex est egal a la valeur de l'element cou- 
rant et dont la position est anterieure dans l'arbre du document ; 

• avant tout element dont l'attribut tabi ndex est egal a la valeur de l'element cou- 
rant et dont la position est posterieure dans l'arbre du document ; 

• avant tout element possedant une valeur de tabi ndex superieure a celle de l'ele- 
ment courant. 

La valeur par defaut de l'attribut est pour les elements pouvant recevoir le focus et -1 
pour les elements non habilites a le recevoir. 

Une fois qu'un element possede le focus, il peut etre active par Taction d'une autre 
touche, typiquement « Entree » qui emule bien souvent un clic de souris. Cela peut 
correspondre : 

• pour un lien, a Taction de suivre Tadresse contenue dans l'attribut href ; 

• pour un bouton a Taction de cliquer sur ce bouton ; 

• pour un champ de formulaire, a valider Tensemble du formulaire (submit). 

Dans le cas d'un element qui ne dispose pas d'action par defaut, mais auquel on 
accede grace a tabi ndex, il ne se produira aucune action, mais un evenement de type 
click sera genere. II est conseille de le completer par une pseudo-classe CSS: 
focus, car celui-ci n'est pas toujours rendu visuellement, notamment sur les ele- 
ments sans action. Les navigateurs equipes du moteur WebKit possedent une valeur 
par defaut (correspondant a la capture d'ecran ci-apres). 
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Exemple d'association fictive de tabindex 



<p tabindex="2">Paragraphe de texte</p> 
<P> 

<label>Nom :</label> 

<input tabindex="3" name="nom" type="text"> 
</p> 
<P> 

<label>Prenom :</label> 

<input tabindex="l" name="prenom" type="text"> 
</p> 
<p> 

<button tabindex="4">0K</button> 

</p> 



Feuille de style associee 



button: focus { 

outline: red dotted 5px 

} 



Figure 4-63 

Sequence de tabulation 
avec le navigateur Safari 



) Attn but tabindex 



Paragraphe de texte 
Nom : 



Prenom : | 
[OK] 



) Attn but tabindex 



Paragraphe de teste 
Nom : H 



Prenom : 
[OK] 



Cl [q-Oiiogli! 



6} [(V Google ] » 



I) 



) Attn but tabindex 



Paragraphe de texte 



Nom : 
Prenom : 

[OK] 



) Attn but tabindex 



Paragraphe de texte 
Nom : 



Prenom : 
■ [ OK ] ■ 



■ I @ I— &~ l 



■- I :-■ I" 



Cl Google ] » 



o 



title 



Un attribut title est cense contenir une information (de conseil ou d'indication) 
concernant l'element. Celle-ci peut etre affichee en infobulle par le navigateur et 
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represente un agrement non negligeable pour l'accessibilite des pages web. On peut 
le retrouver dans differents contextes : 

• avec 1 i nk : le titre ou la description du document lie ; 

• avec les elements medias (audio, video, img) : la description de la ressource ou ses 
credits ; 

• avec les elements texte : un commentaire sur le texte ou sur la citation, une infor- 
mation complementaire sur la source, la description complete de l'abreviation 
dans le cas de abb r ; 

• avec les champs de formulaire : une indication sur la valeur a fournir. 

Si un element ne comporte pas d'attribut ti tl e, on considere que celui equipant son 
ancetre le plus proche est encore pertinent. Pour contrecarrer cet heritage, il suffit de 
preciser une valeur vide. 

Exemple d'usages de I'attribut title 

<p>Le langage <abbr title="Hypertext Markup Language">HTML</abbr> est 
surpuissant !</p> 

Figure 4-64 Le langage HTML est surpuissant ! 

Attribut title "S=F . 1 

u Hypertext Markup Language 



spellcheck <nouveau> 

Les navigateurs web recents comportent une correction orthographique integree, 
signalant de potentielles fautes. Cette fonctionnalite bien utile dans les champs de for- 
mulaires pour eviter les coquilles peut etre activee ou desactivee a la demande grace a 
I'attribut spellcheck. La desactivation peut presenter un interet pour des champs qui 
ne sont pas destines a recevoir des portions de texte dans la langue de l'utilisateur, par 
exemple une zone de texte pour l'edition de code HTML ou d'un autre langage. 

Les valeurs possibles sont : 

• true (vrai) ou chaine vide : la verification orthographique et grammaticale peut 
etre effectuee sur l'element ; 

• f al se (faux) : la verification ne doit pas etre entreprise. 

Exemples d'usage de I'attribut spellcheck 

<textarea spell check="fal se"x/textarea> 
<input type="text" spell check="true"> 
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II n'est pas necessaire d'appliquer cet attribut individuellement sur plusieurs elements 
si ceux-ci sont contenus dans le meme parent auquel peut etre applique spell check, 
lis heritent alors de ce parametre. 

Exemple d'usage de I'attribut spellcheck 

<div spell check="false"> 

<textareax/textarea> 
<input type="text"> 
</d"i v> 

Par defaut, la verification orthographique est activee prioritairement sur les zones 
textarea et de facon moins frequente sur les champs de formulaire input. Elle peut 
aussi etre appelee via le menu contextuel d'un element. 

• Mozilla Firefox 2+, Internet Explorer 10+, Opera 9+ : au fur et a mesure de la 
frappe, par defaut sur textarea, mais pas sur input type="text" ; 

• Safari 3+, Google Chrome 1+ : au fur et a mesure de la frappe, par defaut sur 
textarea et i nput type="text" ; 

style 

Des proprietes de style specifiques a un element peuvent etre enumerees dans 
1'attribut style, separees par des points-virgules (inventes par Aide l'Ancien au 
XV e siecle !). La priorite de ces instructions est maximale sur celle des eventuelles 
feuilles de style externes appliquees au document. 

Pour des raisons de maintenabilite du code, de performance (mise en cache) et de 
lisibilite, il est recommande d'y recourir le moins possible et de privilegier les feuilles 
CSS externes qui permettent de mutualiser les declarations pour l'ensemble des ele- 
ments d'une page ou d'un site. 

Exemple d'usage de I'attribut style 

<p styl e="col or : #456 ; background : #cbdbe5 ; paddi ng : . 3em ; text- 
align:center;font-size:3em;border:3px solid steel blue; font- 
f ami 1 y : Ceorgi a ; f ont-wei ght : bol d">Styl e ! </p> 

Figure 4-65 

Consequence de I'attribut 
style sur un paragraphe 



Style ! 
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Relations des liens 

L'attribut rel, applique aux elements <link>, <a> et <area> definit les relations que 
peut avoir le document avec d'autres ressources. La liste n'est pas exhaustive etant 
donne que le WhatWG prevoit progressivement d'accepter des extensions aux 
valeurs possibles sur des suggestions pertinentes. 

En HTML 5, deux categories sont a considerer : les liens etablis vers d'autres res- 
sources qui ont une incidence directe sur les possibles interpretations du document 
courant (par exemple, une feuille de style CSS, une icone) et les liens etablis vers 
d'autres documents independants obeissant a une relation particuliere. 

Ces relations sont la plupart du temps definies dans une sequence d'elements <link> a 
l'interieur de l'en-tete <head> du document, et plus rarement sur des liens classiques <a>. 

Tableau 4-126 Types de relations 

Valeur de rel Effet sur Effet sur <a> Description 
<link> et <area> 



alternate 


lien 


lien 


Lien vers une version alternative du document, par exemple une 
version imprimable, une traduction, un site miroir ou un flux de 
syndication RSS/Atom. 


archives 


lien 


lien 


Lien vers des archives. 


author 


lien 


lien 


Lien vers I'auteur du document, voire lien de type mai 1 to : vers 
son adresse e-mail. 


bookmark 


N/A 


lien 


Lien permanent de I'ancetre arti cl e ou secti on le plus pro- 
che pour I'ajout aux signets/favoris du navigateur. 


external 


N/A 


lien 


Indique que le document cible ne fait pas partie du meme site que 
le document courant. 


fi rst 


lien 


lien 


Lien vers le premier document si le document courant fait partie 
d'une serie. 


help 


lien 


lien 


Lien vers une section d'aide contextuelle. 


"i con 


ressource 
externe 


N/A 


Importe une icone representant le document courant. 


i ndex 


lien 


lien 


Lien vers un autre document contenant une table des matieres ou 
un index, contenant le document courant. 


last 


lien 


lien 


Lien vers le dernier document si le document courant fait partie 
d'une serie. 


1 i cense 


lien 


lien 


Lien vers une licence pouvant etre appliquee au contenu du docu- 
ment. 


next 


lien 


lien 


Lien vers le document suivant si le document courant fait partie 
d'une serie. 
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Tableau 4-126 Types de relations (suite) 



Valeur de rel Effet sur Effet sur <a> Description 
<link> et <area> 




nofollow 


N/A 


lien 


Indique que I'auteur du document courant ne cautionne pas le 
document lie. 


noreferrer 


N/A 


lien 


Demande au navigateur de ne pas envoyer d'en-tete HTTP Referer 
(permettant de determiner la provenance du document original) si 
le lien est suivi. 


pi ngback 


ressource 
externe 


N/A 


Adresse du serveur qui gere le pingback (ou trackback) pour le 
document courant. 


prefetch 


ressource 
externe 


ressource 
externe 


Lien vers une ressource pouvant etre telechargee et mise en cache 
en avance par le navigateur. 


prev 


lien 


lien 


Lien vers le document precedent si le document courant fait partie 
d'une serie. 


search 


lien 


lien 


Lien vers un moteur qui permet de chercher au sein du document et 
ses pages afferentes, ou ressource OpenSearch. 


stylesheet 


ressource 
externe 


N/A 


Importe une feuille de style. 


sidebar 


lien 


lien 


Lien vers un document pouvant etre affiche dans la zone contex- 
tuelle (sidebar) du navigateur s'il en possede une. 


tag 


lien 


lien 


Attribue au document courant une etiquette (un tag) identified par 
I'adresse donnee. 


up 


lien 


lien 


Lien vers un document parent pouvant preciser le contexte du 
document courant. 



Les valeurs suivantes ont ete retirees depuis HTML 4 : appendix, chapter, 
contents, copyright, glossary, index, section, start, subsection. 

Les nouvelles valeurs sont : archives, author, bookmark, external, first, index, 
last, license, nofollow, noreferrer, pingback, search, sidebar, tag, up. 



Quelques relations notables 

Consultez au chapitre 4 la description de l'element <link> pour des details comple- 
mentaires au sujet des valeurs icon, stylesheet, alternate, et license. 

nofollow 

La valeur nofollow indique que le lien etabli n'est pas « approuve » par son auteur, 
notamment lorsqu'il est etabli pour des raisons commerciales. II a ete invente par Google 
et est pris en compte par les moteurs de recherche dans le calcul de l'importance des pages 
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en termes de referencement. Un lien possedant I'attribut rel="nofo"llow" ne devra (en 
theorie) pas influencer le positionnement d'une page dans les resultats de recherche. 

Exemple de lien abusivement etabli 

<hl>Mon titre d ' arti cl e</hl> 

<article><!-- ... Article de blog ... --></article> 

<h2>Commenta"i res</h2> 

<p>Commentai re de Pi toui 1 1 e8795 :</p> 

<p>Je trouve ce que tu racontes tres interessant, venez tous voir mon 
site de <a href="http://www. jevendsdestracteurs.com/">vente de 
tracteurs</a> !</p> 

C'est une valeur qui devait ainsi empecher le spam dans les commentaires rediges par 
les utilisateurs (blogs, sites communautaires, forums) au travers des backlinks, liens 
etablis pour ameliorer la « reputation » d'un site dans la bataille incessante pour le 
referencement supreme. Elle est appliquee par defaut par la plupart des moteurs de 
blogs ou CMS autorisant les interventions publiques. 

Exemple de lien precautionneusement remis a sa place 

<h2>Commentai res</h2> 

<p>Commentai re de Pi toui 1 1 e8795 :</p> 

<p>Je trouve ce que tu racontes interessant mais venez tous voir mon 
site de <a href="http://www. jevendsdestracteurs.com/" 
rel="nofo"Now">vente de tracteurs</a> !</p> 

Toutefois, sa presence ne signifie pas que le contenu de la page liee ne sera jamais 
indexe. Un robot d'indexation peut tout a fait suivre le lien et l'ajouter aux resultats, 
mais sans lui donner le poids qu'une relation classique lui confererait depuis la page 
d'origine. Pour prevenir toute indexation, il est preferable de se pencher du cote du 
fichier robots . txt place a la racine du site en question. 

noreferrer nOUVeOU 

Le mot-cle noreferrer desactive la transmission du referant dans l'en-tete HTTP 
Referer (adresse de la page de provenance), lorsque l'utilisateur exploite le lien dis- 
posant de I'attribut rel="noreferrer". 

De par la subtilite de l'orthographe anglaise, noreferrer comporte trois « r » et l'en- 
tete HTTP Referer en comporte deux. 
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prefetch <nouveau> 

Le terme prefetch provient de pre (avant) et de fetch, qui signifie en anglais 
« recuperer » ou dans le contexte du Web « telecharger ». Un lien possedant l'attribut 
rel="prefetch" indique au navigateur de precharger la ressource liee (image, autre 
document HTML, autre feuille CSS, etc.). 

Cette fonctionnalite permet la mise en cache prealable de donnees que le visiteur est 
susceptible d'utiliser lors des prochaines etapes de navigation, afin de reduire leur 
temps d'acces. Cette phase de prechargement est declenchee silencieusement a la fin 
du chargement de la page courante elle-meme, afin de ne pas penaliser cette action 
prioritaire. Lorsque la navigation necessite un appel a Fun des fichiers places en 
cache, ils peuvent alors etre servis directement et rapidement depuis le disque local 
sans effectuer de requete reseau. 

L'attribut rel="prefetch" est applique dans cette optique a I' element <1 ink>, dans la 
section <head> de la page. 

Exemple d'usage de prefetch 

<head> 

<!-- Autres instructions... --> 

<!-- Prechargement d'une page HTML --> 
<"link rel="prefetch" href="autre-page . html "> 
</head> 

Cependant, il faut sen servir avec sagesse et moderation. Une page prechargee peut 
fausser les statistiques de visites d'un site et mobiliser une partie de la bande passante 
inutilement - surtout dans le cadre d'une navigation sur peripherique mobile - si le 
visiteur n'a finalement aucun usage des ressources placees en cache. 

Quels sont les cas concrets dans lesquels prefetch peut rendre service ? 

• Pour les images destinees a etre placees sur l'ensemble des pages. 

• Pour les feuilles de style complementaires repondant a ce meme critere. 

• Pour la page listant les resultats de recherche suivants dans le cadre d'un moteur. 

• Pour plusieurs pages correspondant aux seules etapes suivantes envisageables, par 
exemple, dans une presentation ou une procedure d'inscription lineaire. 

Exemple d'usage de prefetch 

<!-- Prechargement d'images --> 

<link rel="prefetch" href="/images/ni veau2/imagel. png" /> 
<link rel="prefetch" href="/images/ni veau2/image2 . png" /> 
<link rel="prefetch" href="/images/ni veau2/image3 . png" /> 
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II faut noter que le protocole HTTPS est aussi concerne en plus de HTTP. Aucun 
autre protocole n'est accepte. Un prechargement n'a aucune consequence sur l'histo- 
rique du navigateur : l'adresse n'est pas ajoutee a son index, car il serait possible de le 
« polluer » par des pages que le visiteur n'aurait jamais parcourues etant donne que les 
adresses appartenant a un autre domaine sont tolerees. 



Implementation 

Cette fonctionnalite est disponible depuis 2003 pour Mozilla Firefox, et prevue depuis Google 
Chrome 10+, mais souffre d'un bogue qui sera probablement corrige. L'option du moteur Mozilla/Gecko 
network, prefetch-next (accessible dans about : conf i g) permet de le desactiver. 



first, last, prev, next, up 

Des relations de sequence (et non forcement de hierarchie) peuvent lier les docu- 
ments entre eux, grace a ces valeurs portant bien leur nom. HTML 4 avait deja 
introduit start, prev et next. HTML 5 a ajoute fi rst en synonyme de start, puis 

I ast et up. 

II faut noter que certains navigateurs tels que Mozilla Firefox peuvent appliquer a 
next le meme principe de prechargement qu'avec prefetch, afin d'anticiper la navi- 
gation vers la page qualifiee comme etant la suivante. 



RESSOURCE Au sujet des liens 

Par le W3C 

► http://www.w3 .org/TR/htm 1 5/1 i n ks. html 
Par le WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html 
Extensions autorisees pour I'attribut rel 

► http://wiki.whatwg.org/wiki/RelExtensions 



Attributs evenements 

Les attributs gestionnaires d'evenements jouent un role particulier, car ils associent un 
type d'evenement DOM pouvant survenir pour un element a une fonction de script. 

Cela permet done de declencher un bout de code JavaScript, elementaire ou com- 
plexe, sur des evenements tels que « lorsque la page a ete chargee », ou « lorsque l'uti- 
lisateur presse sur une touche ». La plupart d'entre eux concernent : 
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• les entrees utilisateur (souris, clavier) ; 

• la navigation au clavier (focus) ; 

• les formulaires (changement de valeur, validation) ; 

• la lecture de medias (audio, video) ; 

• les interactions riches (glisser-deposer, molette souris) ; 

• le chargement des pages et des ressources. 

Declenchement d'une fonction au die 

<input type="button" val ue="Cl iquez-moi " 
oncl ick="fai reQuel quechoseO ; "> 

<scri pt> 

function faireQuelquechoseO { 

// Quelques instructions... 
alert("Un die ! ") ; 
} 

</scri pt> 

Certains sont nouveaux en HTML 5, notamment ceux qui concernent la lecture de 
medias (audio, video). Tous debutent par le terme « on » suivi du nom de l'evene- 
ment DOM auquel ils correspondent. 



Voyez le chapitre 2 sur le DOM pour I'ecriture complete des gestionnaires d'evenements en JavaScript et 
la presentation de quelques fonctions bien utiles. 



Tableau 4-127 Evenements DOM 


Evenement 


Correspondance 


Categorie 


onabort 


Chargement annule par I'utilisateur. 


Reseau 


onbl ur 


Perte du focus : I'element detenait le focus et I'a perdu, car I'utilisa- 
teur a navigue vers un autre element, au clavier ou grace a son dis- 
positif de pointage. 


Navigation 


oncanplay 


L'agent utilisateur peut reprendre la lecture de I'audio ou de la 
video, mais estime que s'il debute a cet instant, la totalite du media 
ne pourra etre lue au rythme de lecture actuel sans avoir a effectuer 
d'autre(s) pause(s) pour mettre en cache les donnees. 


Medias 


oncanpl ayth rough 


L'agent utilisateur peut reprendre la lecture de I'audio ou de la 
video en estimant qu'a cet instant la totalite du media pourra etre 
lue au rythme de lecture actuel sans avoir a effectuer d'autre(s) 
pause(s) pour mettre en cache les donnees. 


Medias 
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Tableau 4-127 Evenements DOM (suite) 



Evenement 


Correspondance 


Categorie 


onchange 


L'utilisateur a valide le changement de la valeur d'un element (de 
formulaire). 


Formulaires 


oncl i ck 


L'utilisateur a clique sur l'element et a relache le bouton de la souris 
ou a utilise un autre dispositif de pointage qui emule cette action. 


Souris, pointage 


oncontextmenu 


L'utilisateur a declenche le menu contextuel. 


Navigation 


ondbl click 


L'utilisateur a double-clique sur I'element ou a utilise un autre dis- 
positif de pointage qui emule cette action. 


Souris, pointage 


ondrag 


L'utilisateur est en train de deplacer I'element. 


Drag & drop 


ondragend 


L'utilisateur a fini de deplacer I'element. 


Drag & drop 


ondragenter 


L'operation de glisser-deposer initiee par l'utilisateur est entree dans 
I'element. 


Drag & drop 


ondragl eave 


L'operation de glisser-deposer initiee par l'utilisateur a quitte I'ele- 
ment. 


Drag & drop 


ondragover 


L'operation de glisser-deposer survole I'element. 


Drag & drop 


ondragstart 


Debut de glisser-deposer. 


Drag & drop 


ondrop 


Fin de glisser-deposer, et depot. 


Drag & drop 


ondurati onchange 


L'attribut DOM du rati on sur I'element <audi o> ou <vi deo> 
a ete modifie. 


Medias 


onemptied 


L'element <audi o> ou <vi deo> est retoume a son etat initial. 


Medias 


onended 


La fin de I'audio ou de la video a ete atteinte. 


Medias 


onerror 


Le chargement de I'element a echoue. 


Reseau 


onfocus 


L'element a recu le focus. 


Navigation 


onformchange 


L'utilisateur a valide le changement de valeur d'un element dans le 
formulaire dont cet element depend. 


Formulaires 


onformi nput 


L'utilisateur a modifie la valeur d'un element dans le formulaire 
dont cet element depend. 


Formulaires 


oni nput 


L'utilisateur a change la valeur de l'element de formulaire. 


Formulaires 


oni nval i d 


L'element de formulaire n'a pas respecte les contraintes de valida- 
tion. 


Formulaires 


onkeydown 


L'utilisateur a enfonce une touche. 


Clavier 


onkeypress 


L'utilisateur a enfonce une touche correspondant a un code carac- 
tere. 


Clavier 


onkeyup 


L'utilisateur a relache une touche. 


Clavier 


onload 


L'element a fini son chargement. 


Reseau 


onloadeddata 


L'agent utilisateur peut rendre le contenu audio ou video a la posi- 
tion de lecture courante, pour la premiere fois. 


Medias 
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Tableau 4-127 Evenements DOM (suite) 



tvenemeni 


Correspondence 


Catecjorie 


on! oadedmetadata 


L'agent utilisateur a pu determiner la duree et les dimensions de 
l'element <audi o> ou <vi deo>. 


Medias 


onloadstart 


L'agent utilisateur a commence a charger des donnees medias dans 
I'element <audi o> ou <vi deo>. 


Medias 


onmousedown 


L'utilisateur a presse le bouton de la souris ou du dispositif de poin- 
tage sur I'element. 


Souris, pointage 


onmousemove 


L'utilisateur a effectue un mouvement avec la souris ou le dispositif 
de pointage. 


Souris, pointage 


onmouseout 


L'utilisateur a deplace le curseur de la souris ou du dispositif de 
pointage hors des limites de I'element. 


Souris, pointage 


onmouseover 


L'utilisateur a deplace le curseur de la souris ou du dispositif de 
pointage a I'interieur des limites de I'element ou d'un de ses des- 
cendants. 


Souris, pointage 


onmouseup 


L'utilisateur a relache le bouton de la souris ou du dispositif de poin- 
tage sur I'element. 


Souris, pointage 


onmousewheel 


L'utilisateur a actionne la molette de defilement de la souris ou du 
dispositif de pointage equivalent. 


Souris, pointage 


onpause 


L'utilisateur a mis en pause la lecture de I'element <audi o> ou 
<vi deo>. 


Medias 


onpl ay 


L'agent utilisateur a debute la lecture de I'element <audio> ou 
<vi deo>. 


Medias 


onpl ayi ng 


La lecture de I'element <audio> ou <video> a debute. 


Medias 


onprogress 


L'agent utilisateur telecharge les donnees medias pour I'element 

<audi o> ou <vi deo>. 


Medias 


onratechange 


L'attribut DOM def aul tPl aybackRate ou pi aybackRate a 
ete modifie sur I'element <audi o> ou <vi deo>. 


Medias 


on ready statechange 


L'element et toutes ses ressources ont fini leur chargement. 


Medias 


onreset 


Le formulaire a ete remis a zero. 


Formulaires 


onsc rol 1 


L'element qui a fait I'objet d'un defilement. 


Souris, pointage 


onseeked 


La valeur de l'attribut seeki ng a ete modifiee a f al se (I'opera- 
tion de navigation temporelle sur I'audio ou la video a pris fin). 


Medias 


onseeki ng 


La valeur de l'attribut seeki ng a ete modifiee a true (I'operation 
de navigation temporelle sur I'audio ou la video a eu lieu et est 
d'une duree suffisamment pertinente pour declencher I'evenement). 


Medias 


onselect 


L'utilisateur a selectionne du texte. 


Souris, pointage 


onshow 


L'utilisateur a requis I'affichage de l'element comme menu contex- 
tuel. 


Navigation 
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Tableau 4-127 Evenements DOM (suite) 



tvenement 


Correspondence 


Catecjorie 


onstal 1 ed 


L'agent utilisateur essaie de telecharger les donnees pour la lecture 
de I'element media <audi o> ou <vi deo>, mais celles-ci ne sont 
pas recues. 


Medias 


onsubmi t 


Le formulaire a ete valide. 


Formulaires 


onsuspend 


L'agent utilisateur ne telecharge actuellement pas le contenu du 
media, mais ne dispose pas encore de 1 entierete des donnees. 


Medias 


ontimeupdate 


La position de lecture de I'element <audi o> ou <vi deo> a 
change. 


Medias 


onvol umechange 


L'attribut DOM vol ume ou muted a ete modifie sur un element 
media. 


Medias 


onwai ti ng 


La lecture de I'element <audi o> ou <vi deo> a ete mise en 
pause, car les donnees necessaires pour la suite sont attendues. 


Medias 
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(Web Forms) 




Figure 5-1 



mais cela fonctionne aussi avec des champs 
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Les limitations de HTML 4 pour les formulaires sont flagrantes. Au cours de revolu- 
tion du langage, divers elements de controle ont ete introduits pour permettre aux visi- 
teurs d'un site d'entrer des informations, les valider et les envoyer au serveur. II s'agit de : 

• <input> avec les types text, radio, submit, checkbox, password, file, image, 
hidden ; 

• <textarea> ; 

• <button> ; 

• <select>. 

Ces controles miment les interfaces graphiques que proposaient deja les systemes 
d'exploitation (champs texte, cases a cocher, boutons radio, boutons de validation...). 
Neanmoins, avec la venue des applications web, le souhait d'offrir a l'utilisateur des 
zones d'interaction plus evoluees est devenu plus pressant. 

De nombreuses librairies JavaScript telles que jQueryUI ou YUI ont vu le jour pour 
apporter une reponse tant fonctionnelle que graphique, avec I'inconvenient d'un 
deploiement plus complexe qu'un simple code HTML, plus lourd en termes de don- 
nees a telecharger et a interpreter, et moins accessible. 

Laffordance des controles presentes a l'ecran est cruciale pour l'entree d informations 
(calendriers, curseurs a positionner), mais aussi pour definir par avance les types de don- 
nees a entrer dans les champs (nombres, adresse e-mail, adresse de site web, couleur) 
avant validation des formulaires par le serveur et affichage d'un eventuel message d'erreur. 



Definition Les affordances 

Dans son livre Ergonomie web illustree, Amelie Boucher rappelle que les affordances sont les possibility 
d'action suggerees par la forme d'un objet, avant meme qu'il soit utilise. 

Boucher Amelie, Ergonomie web illustree, 60 sites a la loupe, Eyrolles 201 1 

Boucher Amelie, Ergonomie web. Pour des sites efficaces, Eyrolles 201 1 



Lapparence graphique de tous ces controles depend bien souvent du systeme 
d'exploitation et du navigateur. lis sont generalement plus carres et plus gris sur les 
anciens systemes ; plus arrondis et sympathiques avec les programmes recents. Rien 
n'empeche cependant de leur affecter des proprietes CSS. 

Linitiative Web Forms 2.0, initialement nommee « XForms Basic » avait pour but 
de fournir a HTML 4 et XHTML 1.x des moyens de validation des donnees et 
d'affichage plus conviviaux. Cinq ans apres le debut de son developpement par le 
WhatWG, la specification a ete integree directement a HTML 5. 

De nouveaux types pour <input> ont vu le jour ainsi que quelques nouveaux ele- 
ments a part entiere : 
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• <input> avec les types tel, url, email, search, date, time, datetime, datetime- 
local, month, week, number, range, color ; 

• <output> ; 

• <keygen> ; 

• <meter> ; 

• <progress> ; 

• <datalist>. 

Tout aussi importants, de nouveaux attributs ont ete introduits, applicables a 
l'ensemble des controles de formulaire ou a certains seulement. 

Les nouveaux attributs seront recapitules apres l'ensemble des descriptions, et ne seront pas repris indi- 
viduellement dans les tableaux d'attributs specifiques a chaque element. 



< input > et ses variantes 

L'element <input> est particulier, car il revet de multiples apparences et fonctionna- 
lites, uniquement caracterisees par l'attribut type. Son but est de recueillir les infor- 
mations d'une entree effectuee par l'utilisateur, eventuellement en lui fournissant 
toutes les indications necessaires pour structurer son entree ou son choix. 

Afin de pouvoir enrichir les elements de formulaire en HTML, des nouveaux types 
ont ete ajoutes pour <i nput> en HTML 5. Voici un recapitulatif des types pratiques 
depuis les precedentes versions de HTML ainsi que ceux inaugures recemment. 



Tableau 5-1 Recapitulatif des valeurs possibles pour l'attribut type de la balise <input> 



Type 


Role 


HTML 5 


text 


Champ de texte 




password 


Champ mot de passe 




hi dden 


Champ cache (invisible) 




radio 


Bouton radio (un seul choix) 




checkbox 


Case a cocher (choix multiples) 




button 


Bouton 




reset 


Remise a zero du formulaire 




submit 


Bouton de validation du formulaire 




image 


Image cliquable 




file 


Fichier 
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Tableau 5-1 Recapitulatif des valeurs possibles pour I'attribut type de la balise <input> (suite) 



Type 


Role 


HTML 5 


tel 


Numero de telephone 


Nouveau 


url 


Adresse URL/URI 


Nouveau 


emai 1 


Adresse e-mail 


Nouveau 


search 


Champ de recherche 


Nouveau 


date 


Date 


Nouveau 


time 


Heure 


Nouveau 


datetime 


Date et heure 


Nouveau 


datetime-local 


Date et heure (locales) 


Nouveau 


month 


Mois 


Nouveau 


week 


Semaine 


Nouveau 


number 


Valeur numerique 


Nouveau 


range 


Valeur numerique d'un intervalle, sans grande precision 


Nouveau 


color 


Une couleur RVB (3 composantes de 8 bits) 


Nouveau 



RESSOURCE Specification HTML 5 au sujet de I'element INPUT 

Par le W3C : 

► http://www.w3.org/TR/html5/the-input-element.html 

► http://www.w3.org/TR/html5/common-input-element-attributes.html 

► http://dev.w3.org/html5/markup/input.html 
Par le WhatWG : 

► http://www.whatwg.org/specs/web-apps/current-work/complete/the-input-element.html 



Un element sans attribut type est considere par defaut comme <input 
type="text">. La description de I'element <labe"l> present dans les exemples se fera 
ulterieurement (il s'agit d'une etiquette qui est liee par son attribut for a l'identifiant 
id du champ <input> qui lui correspond). 

Dans tous les cas de figure, I'attribut val ue determine la valeur du champ transmise a 
la validation du formulaire, et I'attribut name son nom afin de retrouver quel champ 
correspond a quelle valeur lors du traitement des donnees apres leur envoi via HTTP. 

II est absolument obligatoire de verifier et de valider les donnees au prealable du cote du 
serveur avant de les utiliser. Un utilisateur malintentionne pourrait introduire des valeurs 
non souhaitees, avec une syntaxe provoquant un comportement erratique des scripts ou 
des requetes sur une base de donnees. Aucune contrainte definie en JavaScript cote 
client n'est fiable, puisqu'il est possible de la desactiver purement et simplement. 
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Exemple de formulaire minimaliste 

<form method="post> 

Identifiant : <input type="text" name="1ogin"> 
Mot de passe : <input type="password" name="mdp"> 
<input type="submi t" val ue="Val i der"> 

</form> 

Exemple de reception et de traitement des donnees cote serveur en PHP 

<?php 

if(isset($_POST[' login']) && i sset($_POST[ ' mdp ' ] )) { 
// Identification... 

echo "Bienvenue " .$ POST['login'] . " !"; 

} 

?> 



Tableau 5-2 Proprietes de I'element <input> 



Propriete 


Details 


Modeles de contenu autorises 


Aucun, element vide. 


Parents autorises 


Tout element pouvant contenir des elements de phrase. 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante. 



text 

Le type text est le champ de formulaire le plus classique qui soit. Comme son nom 
le suggere, il permet la saisie d'un texte (relativement court pour des raisons de lisibi- 
lite, car visuellement le controle est monoligne et d'une largeur determinee). 

<input type="text" name="prenom"> 

Figure 5-2 r, 1 

Champ d'entree texte 

Tableau 5-3 Attributs specifiques a <input type="text"> 

Attribut Valeurs 

name texte 

value texte Valeur de la paire a la soumission du formulaire 




Nom de de la paire cle/valeur a la soumission du formulaire 
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password 



Confrere de text, un champ d'entree de mot de passe password est un equivalent 
dont les caracteres sont remplaces visuellement par des asterisques ou des points. 

Mot de passe : <input type="password" name="motdepasse"> 

Mot de passe 



Figure 5-3 

Champ de mot de passe 



Tableau 5-4 Attributs specifiques a <input type=" password "> 



Attribut Valeurs 


Role 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



Son comportement est semblable en tous points a celui d'un champ texte classique, a 
l'exception de la deactivation par defaut du copier sur son contenu. Neanmoins, il est tres 
facile de lire sa valeur en JavaScript ou via un inspecteur DOM, ce n'est done pas un 
champ dont le contenu est securise. A la validation du formulaire, il est egalement 
transmis en clair sur le reseau - hors utilisation d'un protocole de cryptage avec HTTPS. 



tel nouveau 



Premier parmi la serie des nouveaux types inaugures par HTML 5, tel est une decli- 
naison d'un champ texte par defaut indiquant au navigateur que Ton s'attend a saisir 
un numero de telephone. 

Telephone : <input type="tel" name="telephone"> 

Safari Mobile pour iOS reconnait tres bien cette specificite en affichant un clavier 
approprie pour faciliter l'entree d'une serie de chiffres. 

Tableau 5-5 Attributs specifiques a <input type="tel"> 



Attribut Valeurs 


Role 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 
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Figure 5-4 

Champ de telephone 




Telephone : 

























€3 



Meme si le remplissage du champ est relativement cadre pour les navigateurs sup- 
portant ce nouveau type, rien n'empechera un utilisateur experimente de soumettre 
une quelconque valeur ne repondant pas au masque desire. Cette nouvelle fonction- 
nalite n'epargne pas une verification cote serveur. 

On compte de multiples manieres de proceder, en voici une tres simple a l'aide des 
expressions regulieres en PHP, qui relevent d'une syntaxe de masque necessitant 
moult exemples et explications et ne pourront etre detaillees dans cet ouvrage, mais 
pour lesquels il existe de nombreuses ressources et tutoriels. Dans le cas present, la 
verification porte uniquement sur les caracteres recus avec la fonction preg_match 
appliquee sur la variable PHP $_REQUEST[' telephone'] qui est remplie avec le 
champ de formulaire telephone apres son envoi, qu'il soit de type POST ou GET. 
Les sequences internationales (verification des groupes, espaces, tirets, parentheses) 
ne sont pas prises en compte. 

Verification simplifiee d'un numero de telephone en PHP 

<?php 

if(!preg match('/A(+)?C[0-9\-\.\s\)\(\#\"])+$/i', 
$_REQUEST['telephone'])) { 

// On efface la variable par precaution 

unset($_REQUEST[' telephone']) ; 

// Et on affiche un message d'erreur 

echo 'Veuillez entrer un numero de telephone valide'; 

} 

?> 
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Contrairement aux types url et email qui attendent patiemment dans les prochains 
paragraphes, il n'y a aucune verification de syntaxe etant donne la variete des nota- 
tions pouvant exister au niveau international. Pour cela, il est preferable d'utiliser 
l'attribut pattern pour effectuer une validation de la saisie cote navigateur. 



url nouveau 



Dans la meme famille, le Working Group HTML en a profite pour prevoir un 
champ texte destine a recevoir une adresse de type URL absolue. 

URL : <input type="url" name="adresseweb"> 

De maniere equivalente, Safari Mobile deploie un clavier personnalise comportant 
quelques touches virtuelles plus appropriees a la saisie d'une adresse Internet. 



Figure 5-5 

Champ d'adresse URI/URL 



iPod ~? 



URL : 



: 




[ . ] 



Tableau 5-6 Attributs specifiques a <input type="url"> 



Attribut Valeurs 


Role 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



A partir d'Opera 11, ce champ est automatiquement prefixe par http:// a la fin de 
son edition, si Ton oublie de preciser le protocole. II est cependant tout a fait autorise 
d'en indiquer d'autres, tels que ftp : // ou mai 1 to : puisque ces families de protocoles 
correspondent aussi a des URL. 



238 



5 - Les formulaires (Web Forms) 



email nouveau 

Un champ de type emai 1 est un autre champ texte specialise, destine a recevoir une 
adresse e-mail. 

Connaissant la plage de caracteres qui peuvent etre entres pour une telle adresse, un 
navigateur mobile et tactile peut egalement decider d'afficher un clavier specifique et 
restreint aux caracteres utiles (a-z, 0-9, @, -, _, .) pour faciliter la saisie. 



Figure 5-6 

Champ d'adresse e-mail 



iPod ■=> 



E-mail : 




M 



L^gjj <. 5pac <. | @ j 



Le navigateur est libre de lui affecter une apparence specifique lorsqu'il constate que 
la syntaxe n'est pas respectee. 

| <p>E-mail : <input type="email" name="adressemai l"x/p> 



Figure 5-7 

Champ d'adresse e-mail 



E-mail 



test(SS 



Veuillez saisirune adresse courriel valide. 



Une petite subtilite affecte ce champ : il ne depend pas de la RFC 5322 qui definit 
usuellement les syntaxes pour les adresses e-mail. Le groupe de travail HTML a decide 
que ce standard est a la fois trop strict (avant le caractere @), trop vague (apres @) et 
trop laxiste (autorisation d'espaces, de commentaires, etc.) pour etre pratique. 
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Tableau 5-7 Attributs specifiques a <input type=" email "> 



Attribut Valeurs 


Role 


multiple 


multiple ou "" ou (vide) 


Indique que plusieurs valeurs peuvent etre saisies 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



En suivant le principe de precaution avec une validation obligatoire cote serveur, les 
expressions regulieres sont toutes indiquees. 

Verification de la syntaxe d'une adresse e-mail en PHP 

<?php 

if(!preg match('/A[a-zO-9._-]+@[a-zO-9. -]{2,}\. [a-z] {2 , 4}/i ' , 
$ REQUESTS adressemail '])) { 

// Affichage d'un message d'erreur 

echo 'L\' adresse e-mail n\'est pas valide"; 

} 



search <nouveau> 

Un champ de recherche de type search est une specialisation de champ texte (tou- 
jours monoligne). Dans le fond, il pourrait tres bien s'agir d'une banale copie con- 
forme, car elle ha - actuellement - pas d'autre particularite qu'une signification plus 
explicite. II est possible de l'utiliser pour un champ de recherche global, sur 
l'ensemble d'un site (moteur de recherche), ou bien pour une fonctionnalite de 
recherche plus discrete. 

Recherche : <input type="search" name="mots"> 

Certains navigateurs tels que Safari et Chrome peuvent l'afficher avec une symbolique 
differente d'un champ de texte classique, notamment avec une icone de suppression du 
contenu et une forme arrondie. Cette apparence herite des champs de recherche concus 
pour Mac OS X, mais chaque navigateur est libre pour son implementation. 



Figure 5-8 

Champ de recherche 
sous Chrome 



formulaires html5 
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Tableau 5-8 Attributs specifiques a <input type="search"> 



Attribut 


Valeurs 


Role 


name 


texte 


Nom cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



Pour desactiver l'affichage particulier sur les moteurs de rendu Webkit, la propriete 
CSS -webkit-appearance est applicable a ces elements en lui reattribuant la valeur 
textfield. 



i nput [type="search"] { 

-webki t-appearance : textf i el d ; 

} 

hidden 

Un element <input> de type hidden est un champ cache pour l'utilisateur, mais dont 
la valeur est validee avec le formulaire. II s'agit generalement d'une valeur issue d'un 
script execute cote serveur (par exemple PHP) ou cote client (JavaScript). 

<input type="hidden" name="acti on" val ue="i nscri pti on"> 
Figure 5-9 

Champ cache (si vous ne voyez 
rien... c'est normal !) 



Tableau 5-9 Attributs specifiques a <input type=" hidden "> 



Attribut 


Valeurs Role 


name 


texte 


Nom cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



Bien qu'il soit masque a l'affichage, on peut tout a fait prendre connaissance de son 
existence (nom et valeur) en consultant le code source de la page HTML. Ce n'est 
done pas un champ totalement secret, ni totalement fiable puisque sa valeur peut etre 
modifiee aisement par l'utilisateur en JavaScript ou avec une extension appropriee 
intervenant sur le DOM (par exemple Firebug sous Mozilla Firefox). Son contenu 
doit toujours etre valide cote serveur apres la validation du formulaire. 
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radio 



Un bouton radio est un controle de formulaire, faisant partie d'un groupe d'autres 
boutons radio. lis possedent tous le meme attribut name en tant que lien : un seul 
bouton radio peut etre coche parmi leur ensemble, a un moment donne. 

<P> 

<input type="radio" name="genre" value="masculin" id="m"> 
<label for="m">]e sun's un homme</l abel > 
<input type=" radio" name="genre" value="feminin" id="f"> 
<label for="f">Je suns une femme</label> 
</p> 



<P> 

Souhaitez-vous recevoir la newsletter ? 
<input type=" radio" name="newsletter" value= 
<1 abel for="newsl etter-oui ">0ui </l abel > 
<input type=" radio" name="newsletter" value= 
<label for="newsletter-non">Non</label> 
</p> 



'oui" id="newsletter-oui" checked> 
'non" id="newsletter-non"> 



Un ensemble de boutons radio peut disposer de Fun d'entre eux coche par defaut, en 
lui adjoignant l'attribut checked. Les formulations associees peuvent differer, mais il 
est en general toujours possible d'utiliser <label> pour bien marquer le texte lie a 
chacun des choix. 



Figure 5-10 

Bouton radio 



O Je suis un homme O Je suis une femme 
Souhaitez-vous recevoir la newsletter ? • Oui © Non 



Tableau 5-10 Attributs specifiques a <input type="radio"> 



Attribut Valeurs 


Role 


checked 


checked ou " " ou (vide) 


Etat par defaut (coche) 


name 


texte 


Nom cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



Les donnees transmises apres soumission du formulaire associent la valeur contenue 
dans l'attribut value du bouton qui a ete selectionne, au nom defini par l'attribut 
name pour l'ensemble du groupe radio. 
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Exemple de traitement en PHP 

<?php 

if(isset($_REQUEST['genre'])) { 
i f ($_REQUEST [' genre ']== ' mascul in') { 
// C'est un homme 

} else if($_REQUEST['genre']=='feminin') { 

// C'est une femme 
} else { 

// Indefini 

} 

} 

?> 



checkbox 

Cousines eloignees des boutons radio, les cases a cocher sont des elements de formu- 
laire qui ne sont pas peu fieres d'etre totalement independantes les unes des autres. 

<P> 

<input type="checkbox" name="anonyme" value="l" id="ano"> 

<label for="ano">]e souhaite rester anonyme</label> 
</p> 
<P> 

<input type="checkbox" name="enquete" value="moutarde-chandelier" id="hypothese" 
checked="checked"> 

<label for="hypothese">Je pense que le colonel Moutarde a utilise le chandelier 



□ Je souhaite rester anonyme 

Je pense que le colonel Moutarde a utilise le chandelier 



</label> 
</p> 

Figure 5-11 

Cases a cocher 



Tableau 5-11 Attributs specifiques a <input type=" checkbox "> 


Attribut 


Valeurs 




checked 


checked ou " " ou (vide) 


Etat par defaut (coche) 


name 


texte 


Nom de de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



Les donnees transmises apres soumission du formulaire associent la valeur contenue 
dans l'attribut value de la case a son nom, uniquement si celle-ci a ete cochee. Par 
defaut, il suffit de verifier si la variable n'est pas nulle. 
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Exemple de traitement en PHP 

<?php 

if(isset($_REQUEST['anonyme']) && $_REQUEST['anonyme']) { 

// II souhaite rester anonyme 

} 

if(isset($_REQUEST['enquete']) && $_REQUEST['enquete']== , moutarde-chandelier') { 

// Le coupable est designe 

} 

?> 



button 



Un bouton classique peut etre cree avec un element <input> de type button. II est 
possible de lui adjoindre un gestionnaire d'evenement JavaScript pour declencher 
une action. Ce type de bouton ne valide pas le formulaire. 

| <input type="button" val ue="Annul er" one! i ck="hi story . go(-l) ; "> 



Figure 5-12 

Bouton quelconque 



Annuler 



Tableau 5-12 Attributs specifiques a <input type= " button " > 



Attribut Valeurs 


Role 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



Son intitule est donne par l'attribut val ue. 



reset 



Un controle de type reset est un simple bouton reinitialisant tous les champs du for- 
mulaire a leur etat initial. 

| <input type="reset" val ue="Remettre a zero"> 

Prenom : Georges] Remettre e zero 



Figure 5-13 

Bouton de remise a zero 



Prenom 



J 
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Tableau 5-13 Attributs specifiques a <input type="reset"> 



Attribut 


Valeurs Role 


name 


texte 


Nom cle de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 



submit 



La variante de bouton de type submit est la plus utile, car elle permet de valider le 
formulaire. Bien entendu, il existe des fonctions JavaScript pour produire un resultat 
equivalent, mais ce bouton est nativement prevu a cet usage. II declenche la valida- 
tion complete du formulaire qui le contient, et son envoi a l'adresse specifiee dans 
1' attribut action de ce formulaire. 

<form tnethod="post" action="identification.php"> 

<label for="login">Identifiant :</label> 

<input type="email" id="login"> 

<input type="submit" value="Valider"> 
</form> 



Figure 5-14 

Bouton de validation 



Valider 



Attribut 

name 



val ue 



Tableau 5-14 Attributs specifiques a <input type=" submit" > 
Valeurs Role 

texte Nom cle de la paire cle/valeur a la soumission du formulaire 

texte Valeur de la paire a la soumission du formulaire 



Le texte figurant sur ce bouton est defini par son attribut val ue. 



image 



Les formulaires ne comprennent pas uniquement des champs texte et des boutons. 
Une image cliquable est parfaitement integrable a l'aide du type i mage. En revanche, 
elle peut couvrir deux types d'usage : 

• soit pour la selection de coordonnees (x,y) sur cette image ; 

• soit pour jouer le role de « bouton graphique » pour valider le formulaire. 

<input type="image" src="carte. png" alt="" name="map"> 
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Tableau 5-15 Attributs specifiques a <input type="image"> 



file 



Attribut 


Valeurs 


Role 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


hen ght 


nombre entier non negatif 


Hauteur de I'image (en pixels) 


wi dth 


nombre entier non negatif 


Largeur de I'image (en pixels) 


alt 


texte 


Alternative texte 


src 


URL 


Adresse de la ressource image 



Puisqu'il s'agit d'un element tres proche des images classiques, il accepte les attributs 
width et height pour la definition des dimensions, ainsi qu'alt et src. 

Les coordonnees sont transmises a la soumission du formulaire dans les variables suf- 
fixees name.x et name.y, derivees de l'attribut name de I'image. 



Un element de selection de fichier local peut etre cree avec un type f i 1 e. C'est un 
controle fortement dependant du systeme d'exploitation, puisqu'il fait appel a une 
fenetre de dialogue pour la selection d'un ou plusieurs fichiers. 

II est la plupart du temps represente par un champ texte listant ces fichiers, associe a 
un bouton Parcourir... ou Choisissez un fichier. 



| <input type="file" name="monfi chier" 



Figure 5-15 

Champ de selection 
de fichier sous Chrome 



Choisissez un fichier Aucun fichier choisi 



Tableau 5-16 Attributs specifiques a <input type="file"> 
Attribut Valeurs Role 



mul ti pi e 


multiple ou " " ou (vide) 


Specifie que I'element peut recueillir plusieurs valeurs (plu- 
sieurs fichiers). 


accept 


liste de types MIME 


Indique au navigateur les types MIME des fichiers acceptes 
par le serveur, separes par des virgules. 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire. 



L'attribut multiple permet la selection de plusieurs fichiers pour un meme element 
<i nput> de type f i 1 e, tandis que l'attribut accept definit les types MIME qui seront 
acceptes pour le traitement, soit local en JavaScript, soit cote serveur apres envoi 
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{upload) des fichiers. Cette precision ne constitue qu'une indication pour le naviga- 
teur - s'il la reconnait - et nest pas un nitre absolu de securite. 

Pour l'envoi de fichiers au serveur, le formulaire doit comporter 1'attribut 
enctype="mul ti part/form-data" qui autorise l'envoi de plusieurs « pieces » de don- 
nees binaires. 



Exemple de formulaire PHP minimaliste 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<t"i tl e>Envoi de fi chi ers</t"i tl e> 
<meta charset="UTF-8"> 
</head> 
<body> 



<form method="post" action="" 
enctype="mul tipart/form-data"> 
<input type="file" name="mesfichiers[]" 
accept="i mage/ j peg , image/prig , image/gi f" mul tiple> 

<input type="submi t" val ue="Envoi "> 
</form> 

<?php 

if(isset($_FILES) && i s_array($_FILES) && count(S_FILES)>0) { 

// Raccourci d'ecriture pour le tableau recu 
Sfichiers = $_FILES['mesfichiers'] ; 

// Boucle iterant sur chacun des fichiers 
for($i=0; $i<count($fichiers[' name']) ; $i++){ 

// Affichage d ' i nformati ons diverses 

echo ' <p> ' ; 

echo 'Fichier ' . $fi chi ers [' name '] [$i ]. ' recu'; 

echo ' <br> ' ; 

echo 'Type ' .Sfichiers ['type'] [$i] ; 

echo ' <br> ' ; 

echo 'Taille ' . $fi chi ers [ ' si ze ' ] [$i ] . ' octets'; 



// Nettoyage du nom de fichier 
$nom_fichier = preg_replace('/[Aa-zO-9\.\-]/ 
i ' , ' ' , Sfichiers ['name'] [Si]) ; 



// Deplacement depuis le repertoire temporaire 
move_uploaded_file($fichiers['tmp_name'] [Si] , 'uploads/ 
' . $nom_fi chi er) ; 
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// Si le type MIME correspond a une image, on 1'affiche 
if (preg_match(' /image/' , $f i chi ers [ ' type ' ] [$i])) { 
echo '<brximg src="uploads/' . $nom_f i chi er . ' ">' ; 

} 

echo ' </p> ' ; 

} 

} 

?> 

</body> 
</htm"l> 



Figure 5-16 

Resultat de I'envoi 
de deux fichiers 



| Choisissez un fichier] 2 fichiers | Envoi | 

^ Envoi et traitement 



Ficliier clmrros.jpg re^u 
Type image jpeg 
Taille 21238 octets 




Ficliier fuumimi.png recn 
Type iinage/png 
Taille 11646 octets 




Cet exemple de script reste minimaliste et ne comporte pas de verification reelle sur le type du fichier 
envoye ou sa taille. 

Pour tirer le meilleur parti de cet element avec I'API Fi 1 e, reportez-vous au chapitre 1 1 . 
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date nouveau> 

Avec le type date, debute une liste de plusieurs controles pour 1'entree de donnees 
temporelles. La syntaxe des dates et heures est definie par la RFC 3339. 

Tel que son nom original l'evoque, cet element vise une date a selectionner precise du 
calendrier gregorien. Le format de la valeur texte y correspondant est la succession de 
l'annee sur quatre chiffres, les numeros du mois et du jour, separes par des tirets (ce 
qui equivaut a Y-m-d en PHP). 

<input type="date" name="na"i ssance"> 



Figure 5-17 

Champ de selection 
de date sous Chrome 14 



2011-03-11 



A partir d'Opera 9+, un calendrier est deroule pour simplifier la selection. Rien ne 
contraint un navigateur a l'afficher de la sorte, un simple champ texte classique res- 
pectant le format peut tres bien etre valide. 



Figure 5-18 

Champ de selection 
de date sous Opera 



□ 




Mars 




u 


2011 |£j 


Lun 


Mar 


Mer 


Jeu 


Ven 


Sam Dim 


28 


1 


2 


3 


4 


5 6 


7 


8 


9 


10 


11 


12 13 


14 


15 


16 


17 


18 


19 20 


21 


22 


23 


24 


25 


26 27 


28 


29 


30 


31 


1 


2 3 


4 


5 


6 


7 


8 


9 10 








1 


Aujourd'hui 



Attribut 



Tableau 5-17 Attributs specifiques a <input type="date"> 



Valeurs 



mi n 


date 


Valeur minimale acceptee 


max 


date 


Valeur maximale acceptee 


step 


any 

ou nombre entier positif 


Valeur du pas de selection 


name 


texte 


Nom cle de la paire cle/valeur a la soumission du formulaire 


val ue 


date 


Valeur de la paire a la soumission du formulaire 
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Un intervalle de valeurs autorisees peut etre specifie a l'aide des attributs mi n et max, 
qui adoptent la meme notation texte que l'entree du champ lui-meme. 

<input type="date" name="reservation" 
min="2012-01-01" max="2012-06-30"> 



time <nouveau> 

En parallele de la selection de date, un type time est un champ d'entree pour une 
heure precise. Son format peut se presenter sous deux aspects selon la precision que 
Ton souhaite obtenir : heures:minutes:secondes (ce qui equivaut a H:i :s en PHP), 
suivies ou non d'une valeur decimale separee par un point. 

<input type="time" name="heurecontact"> 

Figure 5-19 

Champ de selection 
d'heure sous Chrome 



23:02:19.191 



Figure 5-20 

Champ de selection |23:59|| ^j 
d'heure sous Opera 

Tableau 5-18 Attributs specifiques a <input type="time"> 



Attribut 


Valeurs 


Role 


mi n 


heure 


Valeur minimale acceptee 


max 


heure 


Valeur maximale acceptee 


step 


any ou nombre a virgule 
flottante positif 


Valeur du pas de selection 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


heure 


Valeur de la paire a la soumission du formulaire 



Les attributs mi n, max et step sont egalement applicables a ce type de champ. 



datetime nouveau 

Le type datetime combine date et time. Du point de vue de la valeur texte repre- 
sentee par l'ensemble, les deux valeurs de date et d'heure sont separees par un carac- 
tere « T ». Elles sont suivies par une precision sur le fuseau horaire concerne. Pour 
plus d'informations concernant cette syntaxe, consultez l'element HTML <ti me>. 
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| <input type="datetime" name="evenement"> 



Figure 5-21 

Champ de selection de date |201 1-03-10T22:02:23.451Z| § | 
et d'heure sous Chrome 



La presentation peut etre bien differente d'un navigateur a l'autre. Chrome 10 
l'implemente comme un champ de texte affichant la valeur intrinseque de l'element 
tandis qu'Opera 1 1 pousse le concept un peu plus loin en scindant le champ en deux 
parties. Le fuseau horaire est quant a lui precise en dehors des controles (ici « UTC » 
equivaut a « Z »). 



Figure 5-22 

Champ de selection de date 
et d'heure sous Opera 



2011-03-13 



v 13:37 



UTC 



Tableau 5-19 Attributs specifiques a <inputtype="datetime"> 



Attribut 


Valeurs 


Role 


mi n 


date et heure 


Valeur minimale acceptee 


max 


date et heure 


Valeur maximale acceptee 


step 


any ou nombre a virgule 
flottante positif 


Valeur du pas de selection 


name 


texte 


Nom de de la paire cle/valeur a la soumission du formulaire 


val ue 


date et heure 


Valeur de la paire a la soumission du formulaire 



datetime-local <nouveau> 

Le type de champ datetime-local est extremement proche de datetime, duquel il 
reprend la selection de date et d'heure, en omettant cette fois toute precision sur le 
fuseau horaire. La date est alors consideree comme survenant dans le fuseau courant 
de l'utilisateur, faute de plus d'informations. 

<input type="datetime-local" name="rendezvous"> 



Figure 5-23 

Champ de selection de date 
et d'heure locales sous Chrome 



2011-03-10T23:02:25.161 
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Figure 5-24 

Champ de selection de date 1 201 1-03-13 
et d'heure locales sous Opera 



v 13:37 



Tableau 5-20 Attributs specifiques a <inputtype="datetime-local"> 



Attribut 


Valeurs 


Role 


mi n 


date et heure (locales) 


Valeur minimale acceptee 


max 


date et heure (locales) 


Valeur maximale acceptee 


step 


any ou nombre a virgule 
flottante positif 


Valeur du pas de selection 


name 


texte 


Nom cle de la paire cle/valeur a la soumission du formulaire 


val ue 


date et heure (locales) 


Valeur de la paire a la soumission du formulaire 



month <nouveau> 

Ce champ permet de selectionner un mois et une annee. II ne peut s'agir d'une 
simple selection de mois parmi un ensemble de douze choix uniques (de janvier a 
decembre), mais bien d'un mois du calendrier relie a une annee precise. 

La valeur texte est composee de I'annee sur quatre chiffres, separee par un tiret du 
mois sur deux chiffres, entre 01 (janvier) et 12 (decembre). 

J <input type="month" name="mo"i s"> 



Figure 5-25 

Champ de selection 
de mois sous Chrome 



2011-09 



Figure 5-26 

Champ de selection 
de mois sous Opera 
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Tableau 5-21 Attributs specifiques a <inputtype="month"> 



Attribut 


Valeurs 


Role 


mi n 


mois 


Valeur minimale acceptee 


max 


mois 


Valeur maximale acceptee 


step 


nombre entier positif 


Valeur du pas de selection 


name 


texte 


Nom de de la paire cle/valeur a la soumission du formulaire 


val ue 


mois 


Valeur de la paire a la soumission du formulaire 



Un intervalle de valeurs autorisees peut etre specifie a l'aide des attributs mi n et max, 
qui adoptent la meme notation texte que l'entree du champ lui-meme. 

week <nouveau> 

Le type week est tres semblable a month, a la difference que l'objet de ce champ - comme 
son nom l'indique - est une semaine. Le format est la aussi tres simple a apprehender, il 
s'agit de l'annee sur quatre chiffres, suivie d'un tiret, de la lettre W et du numero de la 
semaine dans cette annee. 



<input type="week" name="semai ne"> 



Figure 5-27 

Champ de selection 

de semaine sous Chrome 



2011-W33 



Figure 5-28 

Champ de selection 
de semaine sous Opera 
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Tableau 5-22 Attributs specifiques a <input type="week"> 



Attribut 


Valeurs 


Role 


mi n 


semaine 


Valeur minimale acceptee 


max 


semaine 


Valeur maximale acceptee 
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Attribut 



Tableau 5-22 Attributs specifiques a <input type="week"> (suite) 
Valeurs Role 



step 


any 

ou entier positif 


Valeur du pas de selection 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


semaine 


Valeur de la paire a la soumission du formulaire 



Un intervalle de valeurs autorisees peut etre specifie a l'aide des attributs mi n et max, 
qui adoptent la meme notation texte que l'entree du champ lui-meme. 

number <nouveau> 

Un champ de type number consacre son existence aux valeurs numeriques, eventuelle- 
ment situees dans un intervalle specifie par les attributs mi n et max. 



| Nombre : <input type="number" name="age"> 



Figure 5-29 

Champ de selection 
de valeur numerique 



Noimbre 



42 



Tableau 5-23 Attributs specifiques a <input type="number"> 



Attribut 


Valeurs 


Role 


mi n 


nombre a virgule flottante 


Valeur minimale acceptee 


max 


nombre a virgule flottante 


Valeur maximale acceptee 


step 


any ou nombre a virgule 
flottante positif 


Valeur du pas de selection 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


val ue 


nombre a virgule flottante 


Valeur de la paire a la soumission du formulaire 



Si l'attribut step est precise, les controles permettant d'incrementer ou de decre- 
menter la valeur utiliseront ce pas pour passer d'une valeur a l'autre. 



range nouveau 

Une selection de valeur numerique peut aussi etre effectuee avec le type range, mais 
avec un controle volontairement imprecis. L'utilisateur pourra naviguer dans un inter- 
valle defini par les attributs mi n et max, avec un pas eventuellement precise par step. 
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Cependant, par defaut - hors usage d'un JavaScript complementaire -, ce controle ne 
fournit pas d'information directe a l'utilisateur sur l'intervalle ou la valeur obtenue. 
Un cas typique d'utilisation serait celui du volume sonore pour un lecteur <audio> ou 
<vi deo> : l'internaute n'a pas besoin de savoir avec exactitude que le volume est de 
78,2 ou plutot 99,9 que 100, il lui suffit de connaitre approximativement sa position 
par rapport a une limite basse et une limite haute. 



I 



<input type="range" name="vol ume"> 



Figure 5-30 

Champ de variation 



Tableau 5-24 Attributs specifiques a <input type="range"> 



Attribut 


Valeurs 




mi n 


nombre a virgule flottante 


Valeur minimale acceptee 


max 


nombre a virgule flottante 


Valeur maximale acceptee 


step 


any ou nombre a virgule 
flottante positif 


Valeur du pas de selection 


name 


texte 


Nom de de la paire cle/valeur a la soumission du formulaire 


val ue 


nombre a virgule flottante 


Valeur de la paire a la soumission du formulaire 



color nouveau 

Grace au type color, 1' element <input> devient un controle pour la selection d'une 
couleur, ou plutot d'un code couleur stocke dans son attribut value. Le format est 
sous la forme hexadecimale que Ton retrouve deja au sein de HTML et CSS, debu- 
tant par un diese suivi de 6 caracteres alphanumeriques entre et 9, A et F. 

<!-- blanc --> 

<input type="color" name="coul eurl" val ue="#FFFFFF"> 
<!-- bleu royal --> 

<input type="color" name="coul eur2" val ue="#4169El"> 
Attention : les codes couleur HTML (tels que white,lime,chocolate)ne sont pas autorises. 



Figure 5-31 

Champ de selection 
de couleur sous Opera 



#b5e61d 
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II est supporte a partir d'Opera 1 1 qui integre une palette minimale completee par un 
choix plus etendu a l'aide du dialogue couleur par defaut du systeme d'exploitation. 

Tableau 5-25 Attributs specifiques a <input type=" color "> 
Attribut Valeurs Role 



val ue 


code couleur HTML 
hexadecimal 


Valeur de la couleur, sous la forme #[0-9a-fA-F]{6}, c'est-a- 
dire #FF0000 pour rouge. 

Les mots-cles (par exemple red, yellow, blue) ne sont pas 
autorises. 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 



<datalist> 

L' attribut 1 i st place sur les champs d'entree permet d'y lier une liste de choix possi- 
bles, en se referant a son identifiant (attribut i d). Pour cela, l'element <datal i st> est 
utilise en complement. Celui-ci stocke des valeurs differentes a l'aide de differents 
elements <opti on> auxquels on donne une valeur grace a l'attribut val ue. 

Exemple d'usage de <datalist> 

<input type="text" 1 ist="etats" name="etat"> 

<datalist id="etats"> 

<opti on val ue="f rance">France</opti on> 

<opt"ion val ue="su"i sse">Sui sse</option> 

<opti on val ue="canada">Canada</option> 
<!-- ... et ainsi de suite ... --> 
</datal ist> 

La liste de choix est par defaut affichee en deca du champ texte. 



Figure 5-32 

Liste de choix presentee 



Pays 





~_J input 


France | 


Suisse 


datalist 


Canada 



Propriete 



Tableau 5-26 Proprietes de 1'element <datalist> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs <opti on> 


Parents autorises 


Tout element pouvant contenir des elements de phrase, a I'exception de 

<a>, <button> 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 
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Compatibility 

Le support de cet element est limite ; a I'heure des derniers tests, seul Opera 1 1 .5+ le comprend. 



Autres elements de formulaire 

Cette collection declinee a partir de la balise <i nput> est completee par d'autres ele- 
ments dont des veterans et des nouveaux venus. Pour chacun d'entre eux, sont pre- 
cises des attributs specifiques qui leurs sont propres (par exemple col s, wrap, rows 
pour <textarea>), tandis que les autres attributs specifiques (par exemple maxlength, 
placeholder, autofocus pour <textarea>) sont listes en fin de section, car ils peu- 
vent etre communs a de nombreux elements de formulaires. 

<textarea> 

Une entree de texte multiligne n'est pas possible avec <input type="text">, mais elle 
Test avec <textarea>. Cette zone de dimensions variables, dont le contenu est situe entre 
la balise ouvrante <textarea> et la balise fermante </textarea> , est editable. II ne s'agit 
done pas d'un element autofermant vide, qui ne necessite aucun attribut val ue. 

<textarea>C'etait a Megara, faubourg de Carthage, dans les jardins 
d ' Hami 1 car . 

Les soldats qu'il avait commandes en Sicile se donnaient un grand festin 
pour celebrer le jour anniversaire de la bataille d'Eryx, et comme le 
maitre etait absent et qu'ils se trouvaient nombreux, ils mangeaient et 
ils buvaient en pleine 1 i berte . </textarea> 

Tableau 5-27 Attributs specifiques a <textarea> 



Attribut 


Valeurs 


Role 


rows 


entier numerique positif 


Nombre de lignes de texte supposees affichees par defaut par 
le navigateur (ignore si un style est present). 


cols 


entier numerique positif 


Nombre de colonnes de texte supposees affichees par defaut 
par le navigateur (ignore si un style est present). 


name 


texte 


Norn de de la paire cle/valeur a la soumission du formulaire 


wrap 

<nouveau> 


hard 
soft 


Conditionne I'ajout de retours a la ligne par le navigateur a la 
validation du formulaire. 

hard : insererdes retours a la ligne dans la valeur retourneede 
telle sorte que chaque ligne n'ait pas plus de caracteres que la 
valeur specifiee par I'attribut col s (qui est alors obligatoire). 
soft : ne pas ajouter de retours a la ligne. 
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Figure 5-33 

Zone de texte <textarea> 



text area 


C'etait a Megara, faubourg de 




Carthage, dans les jardins 




d'Hamilcar.| 




Les soldats gu 1 il avait 




commandes en Sicile se 




Hnnn^iPTTt" I'm rrr^nH fpFitin nnnr 





Propriete 



Tableau 5-28 Proprietes de I'element <textarea> 
Details 



Modeles de contenu autorises 


Texte simple, representant la valeur de I'element 


Parents autorises 


Tout element pouvant contenir des elements de phrase, a I'exception de 

<a>, <button> 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 



<sclcct> 

II s'agit d'une liste de choix, le plus souvent deroulante, parmi plusieurs elements 
<opti on> dont la valeur est definie individuellement par Fattribut val ue. 



Tableau 5-29 Attributs specifiques a <select> 


Attribut 


Valeurs 


Role 


si ze 


entier numerique positif 


Nombre d'options a presenter a I'utilisateur 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 


multiple 


multiple ou "" ou (vide) 


Si present, plusieurs options peuvent etre selectionnees 
simultanement. 

Si absent, une seule option peut etre choisie par I'utilisateur. 



Une liste de choix <select> ne peut avoir plus d'une option <option> selectionnee 
par defaut grace a Fattribut selected que si son attribut multiple est precise. 

Exemple d'usage de <select> 



<select name="civil ite"> 

<option val ue="Ml 1 e">Mademoi sel 1 e</opti on> 
<option val ue="Mme">Madame</option> 
<option val ue="M">Monsi eur</option> 

</select> 
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Figure 5-34 

Liste de choix 




Mademoiselle » 



Mademoiselle 
Monsieur 



o 



Propriete 



Tableau 5-30 Proprietes de I'element <select> 
Details 



Modeles de contenu autorises 


Zero ou plusieurs elements <optgroup> ou <opti on> 


Parents autorises 


Tout element pouvant contenir des elements de phrase, a I'exception de 

<a>, <button> 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 



<option> 

L'element <option> represente une option individuelle d'une liste de choix <select>. 
Tableau 5-31 Attributs specifiques a <option> 



Attribut 


Valeurs 




sel ected 


selected ou " " ou (vide) 


Si present, I'option est preselectionnee. 


label 


texte 


Intitule de I'option, communique a I'utilisateur. 


name 


texte 


Norn de de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de I'option, soumise a la validation du formulaire. 



Exemple d'usage de multiples <option> 

<p>Choi si ssez un ou plusieurs artistes :</p> 
<select name="impressionnistes" multiple size="6"> 
<option val ue="georges">Ceorges Seurat</option> 
<option val ue="al f red">Al f red Sisley</option> 
<option val ue="berthe">Berthe Mori sot</opti on> 
<option val ue="gustave">Custave Cai 1 1 ebotte</opti on> 
</select> 



Figure 5-35 

Options multiples 



Georges Seurat 
Alfred Sisley 
Berthe Morisot 
Gustave Caillebotte 



259 



HTML 5 - Une reference pour le developpement web 



Dans cet exemple, la liste est multiple et n'est plus deroulante. L'attribut size="6" 
place sur <sel ect> confere un espace par defaut disponible pour six options ; au-dela, 
la barre de defilement sera activee. 



Tableau 5-32 Proprietes de I'element <option> 





Modeles de contenu autorises 


Texte simple 


Parents autorises 


<optgroup>, <select>, <datalist> 


Omission de balise 


La balise ouvrante est obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi 
par un autre <option> ou <optgroup> ou s'il n'y a plus de contenu 
dans I'element parent qui le contient. 



<optgroup> 

Une liste de choix peut parfois comporter un nombre de possibilites impressionnant, 
parmi lesquelles il peut etre difficile de se reperer. Le regroupement d'options est 
propose par <optgroup>. 



Tableau 5-33 Attributs specifiques a <optgroup> 



Attribut 


Valeurs 


Role 


label 


texte 


Intitule du groupe d'options, communique a I'utilisateur 



Le groupement d'options est prevu via les balises <optgroup> dont I'intitule depend 
de l'attribut 1 abel . 



Exemple d'usage d'<optgroup> 

<select name="plat"> 

<optgroupl abel ="Speci al i tes i tal i ennes"> 

<option val ue=" ravi ol "i ">Ravi ol "i al burro e sal vi a</option> 
<option val ue="gnocchi ">Gnocchi parmiggiano</option> 
<opti on val ue="l i moncel 1 o">Li moncel 1 o</opti on> 

</optgroup> 

<optgroupl abel ="Speci al i tes al saci ennes "> 
<option val ue="bretzel ">Bretzel </opti on> 
<option val ue="f 1 ammekueche">Tarte f 1 ambee</opti on> 

</optgroup> 

</sel ect> 

Lintitule de groupe n'est pas selectionnable dans la liste. II ne possede aucune valeur 
exploitable. 
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Figure 5-36 

Groupes d'options 



Ravioli al burro e salvia 



Specialites italiennes 

Ravioli al burro e salvia 
■d, l . l ..,l.':l,,,".TTTr— 

Limoncello "* ' 

Specialites alsaciennes 

Bretzel 

Tarte flambee 



optgroup 



-i ~ 

J .!.i 



Tableau 5-34 Proprietes de I'element <optgroup> 



Propriete 


Details 


Modeles de contenu autorises 


Zero ou plusieurs elements <option> 


Parents autorises 


<sel ect> 


Omission de balise 


La balise ouvrante est obligatoire. 

La balise fermante peut etre omise si cet element est immediatement suivi 
par un autre <optg rou p> ou s'il n'y a plus de contenu dans I'element 
parent qui le contient. 



< button > 

L'element <button> possede plusieurs usages qui se conforment exactement aux 
types eponymes de i'element <input> decrits precedemment, selon la valeur de son 
attribut type. Cependant, la valeur texte n'est plus determinee par un attribut val ue, 
mais par le contenu intrinseque de cet element. 

Tableau 5-35 Attributs specifiques a <button> 



Attribut 

name 


Valeurs 

texte 


Role 

Norn de de la paire cle/valeur a la soumission du formulaire 


val ue 


texte 


Valeur de la paire a la soumission du formulaire 


type 


button 


Bouton classique 




submit 


Bouton de validation du formulaire 




reset 


Bouton de remise a zero du formulaire 



Exemples de boutons 



<button type=" button ">OK</button> 
<button type="subm"i t">Val i der</button> 
<button type="reset">Mi se a zero</button> 



Figure 5-37 

Boutons types [~QK~] | Valider 1 1 Wise a zero | 

(hors de leur contexte) 
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Parents autorises 



Propriete 

Modeles de contenu autorises 




Omission de balise 



Les balises ouvrante et fermante sont obligatoires. 



<output> nouveau 



L'element <output> est voue a recueillir le resultat d'un calcul. Celui-ci peut etre 
dynamique en JavaScript ou genere au prealable dans le code HTML par le serveur. 

Exemple d'utilisation de <output> 

<form> 

<p>Recettes : <"input name=" recettes" type="number"x/p> 
<p>Depenses : <"input name="depenses" type="number"x/p> 
<p>Resultat :<output name="total " 

onformi nput="thi s . val ue=recettes . val ueAsNumber- 

depenses . val ueAsNumber ; "></output>€</p> 

</form> 

Cet exemple fait appel a une soustraction tres simple de deux champs <i nput>, invoquee 
lors de la modification du formulaire (evenement forminput). L'instruction JavaScript 
placee dans l'attribut onformi nput declenche l'affectation du resultat a <output>. 

Exemple d'utilisation de <output> avec variante 

<scri pt> 

function calcul (obj) { 

obj. value = obj .form. recettes. val ueAsNumber - 
ob j . f orm . depenses . val ueAsNumber ; 

} 

</script> 
<form id="somme"> 
<P> 

<1 abel for="num_recettes">Recettes</l abel> 

<input name="recettes" type="number" i d="num_recettes"> 



</p> 
<P> 



<1 abel for="num_depenses">Depenses</l abel> 

<input name="depenses" type="number" i d="num_depenses"> 



</p> 
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<p>Resultat :<output name="total " for="num recettes num depenses" 
onforminput="cal cul (this) ; " form="somme" 

style="background:yellow;border:2px solid orange ; paddi ng : 3px 10px;"> 

</output> €</p> 

</form> 



Figure 5-38 

Le resultat du calcul est recueill 
par <output>. 



Recettes 1458 
Depenses 



121 



Resultat: 13371 c 



output 



: 



; input 
; input 



Tableau 5-37 Attributs specifiques a <output> 



Attribut Valeurs Role 


for 


identifiants uniques separes 
par des espaces 


Identifiants (valeurs des attributs i d) des elements de formulaire 
associes au calcul, dont <output> represente le resultat. 


name 


texte 


Nom de de la paire cle/valeur a la soumission du formulaire. 



Ce principe est avantageux pour plusieurs raisons : l'element est bien distingue 
semantiquement, il n'est plus necessaire d'utiliser un simple <span>, il est possible de 
lui affecter des proprietes de style specifiques dans la feuille de style. 



Propriete 



Tableau 5-38 Proprietes de l'element <output> 
Details 



Modeles de contenu autorises 


Contenu de phrase 


Parents autorises 


Tout element pouvant contenir des elements de phrase 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 


Style par defaut 


output { 

display: inline; 

} 



Compatibility 

Cet element est compris par tous les navigateurs recents sauf Internet Explorer. 
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<kcygcn> nouveau 

L'element <keygen> est un controle generant pour un formulaire une paire de cles 
cryptees, publique et privee. La cle publique est envoyee au serveur, tandis que la cle 
privee est ajoutee au stockage local des cles de securite. 

II ne faut pas le cacher, <keygen> existe depuis la glorieuse periode de Netscape, mais 
n'a jamais ete admis par Internet Explorer. II a ete finalement confirme dans la speci- 
fication HTML 5, mais fait l'objet de nombreuses discussions - parfois a juste titre - 
sur ses prerequis et la pertinence de son existence pour les utilisateurs qui n'ont par- 
fois pas le bagage technique pour en maitriser l'usage. 

Son interet reside dans la creation de cles par cryptographic asymetrique. La cle 
publique est diffusee, la cle privee est gardee secrete. La premiere code les donnees 
tandis que la seconde les decode. 

Lexpediteur d'un message, souhaitant en preserver la confidentialite, le code avec la 
cle publique que le destinataire peut decoder ensuite avec sa cle privee. Dans le sens 
inverse, le message peut etre expedie crypte avec la cle privee de l'expediteur, et 
decrypte par le destinataire avec la cle publique qui lui correspond. On se sert pour 
l'accomplissement de ces etapes de fonctions mathematiques a sens unique, ne per- 
mettant qu'extremement difficilement de retrouver un message en inversant la fonc- 
tion, a moins de detenir la cle privee. 

Cette savante technologie autorise l'usage de certificats avec des serveurs sensibles 
qui necessitent une identification securisee, dans le but de rendre tres difficile pour 
une personne malintentionnee de voler votre identite - c'est-a-dire pretendre utiliser 
votre navigateur et acceder a vos donnees privees. 

Exemple d'usage de <keygen> 

<form action="keygen . php" method="post"> 
<P> 

<label for="login">Login</label> : 

<input type="text" name="login" i d="~l ogi n"> 
</p> 
<P> 

<label for="crypt">Cryptage</label> : 
<keygen name="crypt" id="crypt"> 

</p> 

<pxinput type="submi t" val ue="OK"x/p> 
</form> 

Un avertissement est susceptible d'etre affiche par le navigateur lors de la generation 
de la cle, si celle-ci necessite un intervalle de temps significatif. 
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Figure 5-39 

Generateur de cle 



Login : test 



input 



OK 



Haut niveau 




keygen 



Figure 5-40 

Avertissement 

du navigateur Firefox 



Generation d'une cle privee 



Generation de la cle en cours... Cette operation peut prendre plusieurs minutes... 
Veuillez attendre... 



II appartient ensuite au serveur de disposer de ces informations comme bon lui 
semble, eventuellement en delivrant un certificat complementaire ou en exploitant 
une base de donnees. 

Exemple de script PHP affichant le resultat 

<?php 

i f (i sset($_P0ST[ ' "logi n ' ] )) 

echo '<p>Login : ' .$_P0ST[' login' ]. '</p>' ; 
i f (i sset($_P0ST[ ' crypt ' ] )) 

echo '<pre>' . $_P0ST[ ' crypt ' ] . '</pre>' ; 

?> 



Figure 5-41 

Resultat de la generation 
de cle publique 



J D teygen.php 



"LT 



Login : test 



MIICQCC;A3iVi5jE_:i=:iGCSqe5:b3DQI3kQUjyi4IBEwAwBOiKAc:5kQCt2ShOkT20 
pqOiBEZf2Tbiiiw2qw2rgBJpmEe/5xcrIwgIVjIlLEA9CEIK3/D5dvn1hq6flmg£7c 
b6fiEoD70E'a3HOLZ4PXK3^^9lMj3dlx/WflM1J3WxWnPraknmiiBj4MIY20x0nVIJ,0q 
lyHr+FiXzYllBaPk+bVF7FlVYy3vjisTGLTliwNlbCN33kDaiIIu:rl3niDc6DDJin3yT 
0H63YQCQlG35]Erv.fHcd3N6D7HUPW>:3YwEYHff4HC4DieNNLMe33B9bT0bnzlxL6C 
c4iYEMcSKtbXYIgiHasKzOHlSBYu0iP9yxx^CllBEwJJ6aj/E:tG7nEwt/l3C?:iD59 
HhITOD4 pRDKNAgM3 A&EWAD ANE g kqhkl S 9v 3 3AQQFAAOCACEAR vwlVNo 4 WieZXvx 
AqOLkSnx/DpHaYXi3 2EnDlHB.Sw+OGxirt4fOEYCEc69UarTrs;-RM3RDh3FDur JStqj ZD 
76Blw7Oa=BLTz=YolDYagX0Ltl1HKDhCjTYr6sdzD022/W/cKGv/YKti3ZlZG9qO2j 
e37f znFYE2/<-3YhcdRboHllFchql[ZYQpp:HEElIlIPljlUl/nOYlDKf z+HSKc/ViaiU 
7b7/PH0+j/HMllfEB3hKnBAcBFD3XZrig3Wk:gEIqGEaDCakCvdvGnyLI,JliagKuJg 
I OBYL4YHM4 aOhADeHEmW5Q 9NOT gFnNFY] EDf W2 2NnKKxZf MxQVWBQH-t-AEHE3DB f Y 
yra7PO— 
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Tableau 5-39 Attributs specifiques a <keygen> 



Attribut Valeurs 


Role 


chal 1 enge 


texte 


Chame de texte validee avec la cle 




keytype 


RSA 


Type de la cle generee 


name 


texte 


Norn cle de la paire cle/valeur a la soumission du formulaire 



Par defaut, la cle est de type RSA (du nom des inventeurs de cette methode de 
cryptage : Rivest, Shamir et Adleman). Au moment de la redaction de la specifica- 
tion, seul ce type est officiellement reference, mais il est tout a fait possible qu'un 
navigateur n'en supporte aucun. C'est justement une subtilite autorisant les editeurs 
qui sont reticents a implementer cet element - entre autres Microsoft - de le faire 
sans imposer un type de chiffrement specifique. 



Tableau 5-40 Proprietes de I'element <keygen> 





Modeles de contenu autorises 


Element vide 


Parents autorises 


Tout element pouvant contenir des elements de phrase, a I'exception de 

<a>, <button> 


Omission de balise 


Balise ouvrante obligatoire, pas de balise fermante 



<progrcss> nouveau> 

L'element <progress> represente une barre de progression, telle qu'on peut en 
trouver dans les interfaces graphiques usuelles, c'est-a-dire indiquant l'avancement 
d'une tache. 

Exemple d'utilisation avancee de <progress> 

I <progress i d="i ndi cateur" value="50" max="100"x/progress> 

L'interet de cet element est surtout d'en profiter avec un script dynamique qui met a 
jour son etat. Celui-ci depend d'une valeur numerique symbolisant la progression 
d'un telechargement, d'un calcul lourd, ou d'un appel Ajax quelconque. 

Exemple d'utilisation avancee de <progress> 

<p>Barre de progression : 

<progress id="progression" value="50" max="100"> 
Avancement 50%</progress> 
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<span i d="pourcentage"x/span> 

<input type="button" one! "i ck="modi f (-10) ; " value="-"> 
<input type="button" one! i ck="modi f (10) ; " value="+"> 
</p> 

<scri pt> 

function maj_progress"ion() { 

prg = document. getElementById("progression") ; 
pet = document. getElementById("pourcentage") ; 
pet . i nnerHTML = prg. value + "%" ; 



maj_progression() ; // Initialisation 



function modif(val) { 

prg = document. getElementById("progression") ; 
i f ((prg . val ue+val )<=prg . max && (prg.value+val)>0) { 
prg . val ue += val ; 

prg . i nnerHTML = "Avancement "+prg.value+"%"; 

} 

maj_progression() ; 

} 

</scri pt> 



Figure 5-42 

Barre de progression 



Progression 



50% 



progress 



span 



Avec cet exemple plus complexe, l'etat est modifie par la fonction modi f () qui recoit en 
argument une valeur decrementation (ou de decrementation lorsqu'elle est negative). 



Tableau 5-41 Attributs specifiques a <progress> 



Attribut 



Valeurs 



name 


texte 


Nom de de la paire cle/valeur a la soumission du formulaire 


val ue 


nombre a virgule flottante 
non negatif 


Valeur de la progression 


max 


nombre a virgule flottante 
positif 


Maximum atteignable (si non precise, equivaut a 1) 



Pour des raisons de logique evidente, la valeur de l'attribut val ue ne peut exceder la 
valeur de max. Si ce dernier est absent, value doit etre compris entre et 1 au 
maximum - on part alors du principe que l'echelle est arbitrairement fixee de la sorte. 
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Propriete 



Tableau 5-42 Proprietes de I'element <progress> 
Details 



Modeles de contenu autorises 


Contenu de phrase 


Parents autorises 


Tout element pouvant contenir des elements de phrase a I'exception de 

<progress> 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 


Style par defaut 


progress { 

display: inline-block; 

height: lem; 

width: lOem; 

verti cal -al i gn : -0.2em; 

background-color: gray; 

-webkit-block-flow: tb ! important; 

} 



Cet element est supporte a partir de Firefox 6, Internet Explorer 10, Opera 11, et Chrome. 



<mctcr> nouveau 

L' element <meter> est une jauge qui peut sembler similaire a <progress>, mais qui 
represente avant tout un etat precis sur une echelle definie plutot qu'un pourcentage 
de progression indicatif. 

Tandis que les attributs value et max de <progress> sont strictement reglementes 
afin de restreindre la semantique de I'element a une simple valeur positive avec un 
maximum atteignable, ceux de <meter> sont a la fois plus libres et plus etoffes. Les 
valeurs relevent de nombres a virgule flottante qui peuvent etre nuls ou negatifs, 
aucune autre contrainte n'est precisee. 

En revanche, des segments de l'intervalle sont exploitables pour fournir plus d'indi- 
cations sur l'etat de la jauge, c'est-a-dire ceux pour lesquels on se situe plutot dans 
une valeur consideree comme basse, ou bien dans une valeur consideree comme 
haute, voire aussi dans une situation optimale. Ces renseignements peuvent etre 
rendus graphiquement par les navigateurs grace a des couleurs, par exemple rouge 
lorsque la limite definie par high est atteinte ou depassee. 

Tableau 5-43 Attributs specifiques a <meter> 



Attribut 


Valeurs 


Role 


name 


texte 


Nom cle de la paire cle/valeur a la soumission du formulaire 


val ue 


nombre a virgule flottante 


Valeur de la jauge 


max 


nombre a virgule flottante 


Limite maximale de l'intervalle 


mi n 


nombre a virgule flottante 


Limite minimale de l'intervalle 
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Tableau 5-43 Attributs specifiques a <meter> (suite) 



Attribut 


Valeurs 


Role 


low 


nombre a virgule flottante 


Limite haute du segment de I'intervalle qualifie de « bas » 


hi gh 


nombre a virgule flottante 


Limite basse du segment de I'intervalle qualifie de « haut » 


optimum 


nombre a virgule flottante 


Point optimal de position dans I'intervalle 



Exemples d'usage de <meter> 

<p>Temperature du corps : 

<meter min="35" max="43" value="37. 5">37. 5°C</meter> 

</p> 

<p>Occupation du disque dur : 

<meter low="0" high="400" max="500" value="450" optimum="250">450 Mo 
</meterx/p> 
<p>Score des votes : 

<meter low="7" high="8" max="10" val ue="9">9/10</meter> 
</p> 

Ces trois exemples representent plusieurs cas d'utilisation possibles, avec des inter- 
valles differents. Le contenu propre de l'element <meter> peut apporter une indica- 
tion indeniable (en texte simple par exemple) lorsque celui-ci n'est pas interprete ou 
n'est pas rendu visuellement, notamment avec une unite ou tout type de notation qui 
pourrait etre comprise par un humain. 



Figure 5-43 

Differents elements <meter> 



Temperature du corps : 
Occupation du disque dur 
Score des votes : 

Les conditions sur les valeurs des attributs sont egalement logiques : 

• val ue doit etre compris entre mi n et max ; 

• min <= value <= max; 

• val ue doit etre superieur a zero lorsque mi n est absent, et inferieur a 1 lorsque max 
est absent ; 

• max >= lorsque mi n est absent ; 

• mi n <= 1 lorsque max est absent ; 

• min <= low <= high <= max; 

• low >= Oethigh >= et optimum >= lorsque mi n est absent ; 

• high <= let low <= let optimum <= 1 lorsque max est absent ; 

• min <= optimum <= max. 
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Propriete 



Tableau 5-44 Proprieties de I'element <meter> 
Details 



Modeles de contenu autorises 


Contenu de phrase 


Parents autorises 


Tout element pouvant contenir des elements de phrase 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 


Style par defaut 


meter { 

display: inline-block; 
height: lem; 
width: 5em; 

verti cal -al i gn : -0.2em; 
-webkit-block-flow: tb ! important; 

} 



Cet element est supporte a partir d'Opera 11, Internet Explorer 10, et Chrome. 



Construction de formulaires 

Un formulaire est toujours contenu dans un element <form>. On y place remunera- 
tion de champs <input>, <textarea>, <select>, mais aussi de <fieldset> et 
<label> si necessaire. 



<form> 

Le formulaire est generalement valide par un bouton input de type submit. Les 
valeurs des elements qu'il contient sont alors envoyees au serveur, a l'adresse definie 
par 1'attribut action. La methode HTTP utilisee pour l'envoi des donnees peut etre 
de type GET ou POST, precisee par 1'attribut method. 

Tableau 5-45 Attributs specifiques a <form> 



Attribut 


Valeurs 


Role 


accept-charset 


codes pages de caracteres 
separes par des virgules 


Liste de types d'encodages des caracteres acceptes par le serveur 
pour traiter le formulaire 


action 


URL 


Adresse a laquelle sont envoyees les donnees 


autocompl ete 
nouveau 


on 
off 


Active (on) ou desactive (off) I'autocompletion sur I'ensemble 
du formulaire. 


enctype 


text/plain 
appl i cation/x-www- 
form-urlencoded 
mul ti part/form- 
data 


Type MIME associe au contenu du formulaire lors de sa soumis- 
sion au serveur 

La valeur multipart/form-data doit etre utilisee en combinaison 
avec les champs de type f i 1 e. 
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Tableau 5-45 Attributs specifiques a <form> (suite) 



Attribut 


Valeurs 


Role 


method 


get 
post 


Methode d'envoi HTTP au serveur 


name 


texte 


Nom du formulaire 


noval i date 
nouveau 


novalidate ou " " ou (vide) 


Desactive I'imperatif de validation des donnees cote client pour la 
soumission du formulaire. 


target 


_bl ank 
_parent 
_self 
_top 

nom d'un element de type 
i frame (attribut name) 


Contexte de navigation specifique (i frame, autre) pour la vali- 
dation du formulaire, si celui-ci n'est pas soumis dans le contexte 
courant. 



L' attribut novalidate est destine a une phase de transition pour les navigateurs 
implementant les validations prealables (par exemple pour la syntaxe d'une adresse e- 
mail). En effet, certaines implementations sont completes (Firefox 4+, Opera 11+) et 
d'autres partielles (Chrome -10). II se peut que la soumission du formulaire soit 
empechee par la non-validation d'un champ, sans que l'utilisateur ne sache reelle- 
ment pourquoi. La presence de novalidate contourne cette condition et sen remet 
au serveur pour valider puis informer. 

Exemples imaginaires de formulaires 

<!-- Formulaire sans validation --> 

<form method="post" action="i nscri ption . php" noval idate> 

<label for="mai 1 ">Votre adresse e-mail</label> 

<input id="mail" type="email" name="adressemai 1 "> 

<input type="submi t" val ue="Val i der"> 
</form> 

<!-- Upload de fichier --> 

<form method="post" action="upload.php" enctype="mul tipart/form-data"> 

<input type="file" name="monf i chi er"> 

<input type="submi t" val ue="Envoyer le fichier"> 
</form> 

<!-- Recherche par mot-cle avec la methode get, sans autocompletion --> 
<form method="get" acti on="/tags/" autocomplete="off"> 

<label for="mot">Mot cle :</label> 

<input id="mot" type="text" name="tag"> 

<input type="submi t" value="Go!"> 
</form> 



271 



HTML 5 - Une reference pour le developpement web 



Propriete 



Tableau 5-46 Proprietes de I'element <form> 
Details 



Modeles de contenu autorises 


Contenu de flux 


Parents autorises 


Tout element pouvant contenir des elements de flux 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 


Style par defaut 


form { 

display: block; 
margin-top: Oem; 

} 



<fieldset> 



Differents elements d'entree ayant un rapport entre eux peuvent etre regroupes au 
sein de <fieldset>. II est optionnellement complete par un titre grace a <legend>. 
Visuellement, le navigateur affiche ce regroupement a l'aide d'un cadre. 

Exemple d'utilisation de <fieldset> 

<form method="post" action="val i dati on . php"> 
<f iel dset> 

<!-- ici les champs concernant l'identite --> 
</fieldset> 

<input type="submit" val ue="Val i der"> 
</form> 



Figure 5-44 

Apercu d'un groupe de champs 



Entrez votre nom 



Entrez votre prenom 



flj 



Tableau 5-47 Proprietes de I'element <fieldset> 



Propriete Details 


Modeles de contenu autorises 


Un element <1 egend> optionnel suivi par du contenu de flux 


Parents autorises 


Tout element pouvant contenir des elements de flux 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 
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Tableau 5-47 Proprietes de I'element <fieldset> (suite) 



Propriete 

Style par defaut 




Details 




fieldset { 

display: block; 
margin-start: 2px; 
-webki t-margi n-end : 2px; 
-webki t-paddi ng-before : 0.35em; 
padding-start: 0.75em; 
-webki t-paddi ng-end : 0.75em; 
-webki t-paddi ng-after : 0.625em; 
border: 2px groove (internal value); 

} 



<legend> 



L'element <legend> represente un titre ou une legende explicative pour le reste du 
contenu de son element <fieldset> parent. II peut etre avantageusement exploite 
pour expliciter les groupes presents dans un formulaire. 

Exemple d'utilisation de <legend> 

<form method="post" action="validation.php"> 
<fieldset> 

<legend>Votre identite</legend> 
<!-- ici les champs concernant l'identite --> 
</f i el dset> 
<fieldset> 

<legend>Votre adresse</legend> 
<!-- ici les champs concernant l'adresse --> 
</f i el dset> 

<input type="submi t" val ue="Val i der"> 
</form> 

Dans cet exemple, le formulaire est scinde en deux parties. La premiere concerne 
l'identite de l'utilisateur (nom, prenom, etc.) et la seconde son adresse (code postal, 
ville, pays, etc.). 

La legende est affichee en surimpression au cadre <fieldset> regroupant les con- 
tenus. II n'est pas obligatoire de disposer de plusieurs elements <fieldset> pour 
devoir se servir de <1 egend>. 

Exemple d'utilisation minimaliste de <legend> 

<fieldset> 

<1 egend>Votre identite</legend> 

<label for="nom">Entrez votre nom</label> 
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<input id="nom" type="text" name="nom" requi red> 
<label for="prenom">Entrez votre prenom</label> 
<input id="prenom" type="text" name="prenom" requi red> 
</fieldset> 



Figure 5-45 

Apercu de legende 



legend 



i ' 

i 

Votre identite 



Entrez votre nom 



Entrez votre prenom 



Propriete 



Tableau 5-48 Proprietes de I'element <legend> 
Details 



Modeles de contenu autorises 


Contenu de phrase 


Parents autorises 


<f i el dset> 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 


Style par defaut 


legend { 

display: block; 
padding-start: 2px; 
-webki t-paddi ng-end : 2px; 
border: none; 

} 



< label > 

Un <label> associe une legende texte a un element de formulaire. Son contenu est 
une aide a la comprehension du formulaire, ce qui est fortement recommande en 
termes d'accessibilite. Une activation - un clic - de cet element donne immediate- 
ment le focus sur I'element de formulaire auquel on le lie. Cette liaison est effectuee 
avec l'identifiant (attribut i d) de ce dernier, auquel on fait reference grace a l'attribut 
for de <label>. 

<label for="prenom">Entrez votre prenom</label> 
<input id="prenom" type="text" name="prenom"> 
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Exemple de formulaire avec <label>, <fieldset>, <legend> 

<form method="post" action="va"lidation.php"> 
<fieldset> 

<1 egend>Votre i denti te</l egend> 

<label for="nom">Entrez votre nom</label> 

<input id="nom" type="text" name="nom" requi red> 

<label for="prenom">Entrez votre prenom</l abel> 

<input id="prenom" type="text" name="prenom" requi red> 

<label for="ema"i 1 ">Entrez votre e-mail </label> 

<input id="email" type="email" name="email" requi red> 
</f i el dset> 
<fieldset> 

<1 egend>Votre adresse</l egend> 

<label for="cp">Entrez votre code postal </label> 

<input id="cp" type="number" name="codepostal "> 

<label for="vi 1 1 e">Entrez votre ville</label> 

<input id="ville" type="text" name="ville"> 
</f i el dset> 

<input type="submi t" val ue="Val i der"> 
</form> 

L'aper9u ci-dessous fait appel a un style CSS complementaire pour obtenir une mise 
en forme minimale : 

label { 

display:block; 

} 

Chaque label clique declenche le focus sur le champ qui lui est rattache. 



Figure 5-46 

Formulaire associant label, 
fieldset et legend 



Votre identite 
Entrez votre nom 

Entrez votre prenom 

Entrez votre e-mail 



— Votre adresse — 
Entrez votre code postal 

Entrez votre ville 
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Propriete 



Tableau 5-49 Propriet.es de I'element <label> 
Details 



Modeles de contenu autorises 


Contenu de phrase a I'exception de <1 abel > lui-meme. 

Cet element peut contenir au plus un descendant <i nput>, <button>, 

<select> ou <textarea>. 


Parents autorises 


Tout element pouvant contenir des elements de phrase, a I'exception de 

<a>, <button> 


Omission de balise 


Les balises ouvrante et fermante sont obligatoires. 


Style par defaut 


label { 

cursor: default; 

} 



Attributs communs pour les elements de formulaire 

Comme le veut la tradition, le comportement des elements evoques est module par 
l'usage d'attributs. HTML 5 en ajoute plusieurs dont la vocation est egalement de 
simplifier la conception des formulaires et d'ameliorer les indications transmises a 
l'utilisateur, sans utiliser d'artifices supplementaires en JavaScript. 

Tableau 5-50 Attributs pour les elements de formulaires 
Type Role Types <input> et autres balises HTML 5 



de formulaire concernees 



accept 


Types MIME acceptes 


file 




alt 


Alternative texte a I'image 


image 




autocomplete 


Autocompletion 


text, search, password, url , tel , 
email, date, datetime, datetime- 
local, month, week, time, number, 
range, color, <textarea>, <form> 


Oui 


autofocus 


Autofocus sur I'element 


text, search, password, url, tel, 
email, date, datetime, datetime- 
local, month, week, time, number, 
range, color, <textarea>, <button>, 
<select>, <keygen> 


Oui 


checked 


Etat par defaut (coche ou non) 


radio, checkbox 




di rname 


Precise la direction du texte 
saisi 


Tous 


Oui 


disabled 


Desactive le controle 


Tous 




form 


Formulaire associe 


Tous 


Oui 
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Tableau 5-50 Attributs pour les elements de formulaires (suite) 

Type Role Types <input> et autres balises HTML 5 

de formulaire concernees 



hei ght 


Hauteur de I'image 


i mage 


Oui 


high 


Valeur haute 


<meter> 


Oui 


list 


Liste de suggestions 


text, search, url , tel , email, date, 
datetime, datetime-local , month, 
week, time, number, range, color 


Oui 


1 ow 


Valeur basse 


<meter> 


Oui 


max 


Valeur maximale 


date, datetime, datetime-local, 
month, week, time, number, range, 
<meter>, <progress> 


Oui 


maxl ength 


Nombre de caracteres maximal 


text, search, password, url, tel, 
email, <textarea> 




mi n 


Valeur minimale 


date, datetime, datetime-local, 
month, week, time, number, range, 
<meter>, <progress> 


Oui 


multiple 


Valeurs multiples 


email, file, <select> 


Oui 


name 


Norn du champ 


Tous 




optimum 


Valeur optimale 


<meter> 


Oui 


pattern 


Verification sur syntaxe 


text, search, password, url, tel, 
emai 1 


Oui 


placeholder 


Indication texte 


text, search, password, url, tel, 
email, <textarea> 


Oui 


readonly 


Lecture seule 


Tous 




requi red 


Champ obligatoire 


text, search, password, url, tel, 
email, date, datetime, datetime- 
local, month, week, time, number, 
checkbox, radio, file, <textarea> 


Oui 


size 


Nombre de caracteres affiches 
par defaut 


text, search, password, url, tel, 
emai 1 




src 


Adresse de I'image 


i mage 




step 


Valeur du pas (ecart entre 
valeurs) 


date, datetime, datetime-local, 
month, week, time, number, range, 
<meter>, <progress> 


Oui 


type 


Type du champ 


<i nput> en general 
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Type 



Role 



Tableau 5-50 Attributs pour les elements de formulaires (suite) 
Types <input> et autres balises 



HTML 5 



value 


Valeur par defaut 


Pni ir Ip<; hni itnn<; ■ intiti iIp \/ki hip Hi i hm itnn 

[UUI ICJ UUUIUI 11 . IIIUILMC VIjIUIC uu uuuluii. 

Pour les boutons avec images : valeur symbolique 
du champ valide. 

Pour les boutons radio et cases a cocher : valeur 
du champ selectionne (obligatoire). 
Pour champs texte, declinaisons de <i nput> 
et champs caches (hi dden) : valeur par defaut 
de I'element. 

Ne peut pas etre utilise avec type="f i 1 e". 




width Largeur de I'image 


image 


Oui 



Dans le tableau ci-dessus, les types sont indiques dans la balise <i nput> par souci de 
lisibilite. Les balises differentes de <input> sont indiquees en clair. L'ensemble de ces 
elements beneficie aussi des attributs globaux (voir chapitre precedent). 

Quelques nouveaux attributs HTML 5 



placeholder 

L'attribut pi acehol der permet l'affichage d'un texte indicatif dans un champ, qui s'efface 
lorsque l'utilisateur obtient le focus (en cliquant ou naviguant au clavier). Le texte a pour 
vocation de presenter des exemples de ce que l'utilisateur peut entrer dans le champ. 

Exemple avec l'attribut placeholder 



<label for="recherche">Recherche :</label> 
<input type="text" i d=" recherche" name="q" 
pi acehol der="adresse, code postal, ville, 
<input type="submit" val ue="Val i der"> 



size="30' 
. ."> 



Figure 5-47 

Champ avec indication 



Recherche : ladresse, code postal, ville. 



Valiclei 



Figure 5-48 

Meme champ au focus 



Recherche 



Valiclei 
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autofocus 

L'attribut autofocus donne le focus directement au champ au chargement de la page. 
La page ne doit evidemment comporter qu'un seul element portant cet attribut. 

Exemple avec l'attribut autofocus 

<input type="search" name=" recherche" autofocus> 

Figure 5-49 i 

Focus sur le champ 



autocomplete 

L'attribut autocomplete definit la facon dont l'autocompletion du navigateur doit 
agir sur le champ. Les valeurs possibles sont on (activee) ou off (desactivee). 

Exemple avec l'attribut autocomplete 

<input type="search" name=" recherche" autocomplete="off"> 



required 

L'attribut requi red rend la completion d'un champ obligatoire, signifiant que le 
navigateur ne doit pas permettre la validation du formulaire si ce dernier reste vide. 

Exemple avec l'attribut required 

| <input type="tel" name="tel ephone" requi red> 



Figure 5-50 

Message d'avertissement 



7^ 



Veuillez renseigner ce 
champ. 



multiple 

L'attribut multiple est un booleen signifiant que la saisie de plusieurs valeurs est possible. 
Dans le cas d'un champ de type f i 1 e, le navigateur autorise la selection de plusieurs 
fichiers simultanement pour le meme element HTML. Dans le cas d'un champ texte 
- plusieurs types possibles -, on s'attend a plusieurs saisies separees par des virgules. 

Exemple avec l'attribut multiple 

<input type="emai 1 " name="adresses" multiple> 
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dirname 

L'attribut di rname permet de connaitre apres soumission du formulaire la direction 
dans laquelle le texte a ete entre, ce qui peut s'averer utile avec les ecritures moyen- 
orientales ou asiatiques. Le navigateur complete alors la variable dont le nom a ete 
specifie par la valeur de l'attribut, avec ltr {left to right : de gauche a droite) ou rtl 
{right to left : de droite a gauche). 

Exemple avec l'attribut dirname 

Nom : <input type="text" name="nom" requi red> 
Commentai re : <input type="text" name="commentai re" 
di rname="commentai re . di r "> 

Exemple de reception des donnees en GET 

commentai re=Ki koo&comment.dir=ltr&nom=Cindy 

pattern 

L'attribut pattern est associe aux champs de texte pour tester leur valeur grace a une 
expression reguliere. Les valeurs incorrectes bloquent la validation du formulaire. 

Exemples avec l'attribut pattern 

<!-- On autorise la saisie de caracteres al phanumeri ques --> 
<input type="text" name="logi n" pattern=" [a-zO-9] "> 

Du point de vue securitaire, cet attribut ne remplace pas le role crucial d'une verifica- 
tion cote serveur apres soumission du formulaire. 

RESSOURCE Au sujet de pattern 

Une collection de modeles pour l'attribut pattern 
► http://html5pattern.com/ 

min, max, step 

Afin de preciser les conditions de saisie de valeurs numeriques, les attributs min 
(minimum), max (maximum) et step (pas) ont ete ajoutes aux champs pour lesquels 
ils presentent une utilite, c'est-a-dire les types temporels (date, time, datetime, 
datetime-local, month, week) et numeriques purs (range, number) ainsi que les ele- 
ments <progress> ou <meter>. 
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Le navigateur ne pourra permettre la saisie d'une valeur inferieure a mi n, ni d'une valeur 
superieure a max. Si l'utilisateur choisit d'incrementer ou decrementer la valeur, le « pas » 
adopte doit etre defini par step, qui correspond a l'ecart entre chaque choix permis. 



Une touche de style 

Le module CSS 3 baptise Basic User Interface intervient a point nomme dans la 
construction des formulaires en HTML 5. 

RESSOURCE Specification du module CSS 3 BUI 

CSS 3 Basic User Interface 
► http://www.w3.org/TR/css3-ui/ 

II dresse les regies pour affecter un style conditionnel aux elements requis (ou non), a 
ceux qui sont invalides (ou valides), et aux controles numeriques qui sont hors inter- 
valle. Ces pseudo-classes agrementent le graphisme d'un formulaire et fournissent 
des indications plus completes a l'utilisateur durant sa completion. 

Tableau 5-51 Un resume des pseudo-classes utiles 



Pseudo-classe 


Details 


: requi red 


La valeur est requise (attribut requi red). 


: opti onal 


La valeur est optionnelle (absence d'attribut requi red). 


: val i d 


La valeur est valide (par exemple, la syntaxe de I'adresse e-mail ou de I'URL est 
verifiee). 


: i rival i d 


La valeur est invalide (la syntaxe est erronee). 


: i n-range 


La valeur est dans I'intervalle demande (attributs mi n et max). 


:out-of-range 


La valeur n'est pas dans I'intervalle demande (hors de celui defini par mi n et max). 



Exemple d'usage des pseudo-classes CSS 



<!doctype html> 
<html lang="fr"> 
<head> 

<meta charset="utf-8" /> 
<title>Test CSS3 BUI</title> 
<styl e> 

i nput [type=emai 1 ] : valid, 
input [type=ur"l] : valid, 
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i nput [type=number] :in-range { 
outline: 3px green solid; 

} 

i nput [type=emai 1 ] : invalid, 
i nput [type=url ] :invalid, 
i nput [type=number] :out-of-range { 
outline: 3px red dotted; 

} 

i nput [type=text] : optional { 
background : #eee ; 

} 

i nput [type=text] : requi red { 
outline:4px #369 solid; 

} 

label { 

di splay : i nl i ne- block; 
width :10em; 

} 

</styl e> 

</head> 

<body> 

<form> 
<P> 

<label>Texte requi s</label> 

<input type="text" name="obl i gatoi re" requi red> 

</p> 
<P> 

<label>Texte facultatif</label> 
<input type="text" name="lire"> 

</p> 
<P> 

<label>Adresse e-mail </label> 

<input type="email" name="emai 1 "> 
</p> 
<P> 

<label>Adresse URL</label> 

<input type="url" name="url "> 
</p> 
<P> 

<label>Nombre entre 3 et 10</label> 

<input name="number" type="number" min="3" max="10"> 

</p> 
</form> 

</body> 
</html> 
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Figure 5-51 

Rendu graphique selon 
I'etat du formulaire 



Texte requis 
Texte facultatif 
Adresse e-mail 
Adresse URL 



Nombre entre 3 et 10 ?75 



|syzygie 




|john@ pwnd.fr 



[http: 



//www.alsacreations.com 



Prise en charge 

Le support des navigateurs est inegal pour la gestion des formulaires et des types 
<input>. Opera a ete le premier a en implementer la plupart. Les navigateurs mobiles 
pour ecrans tactiles sont particulierement concernes pour rafEchage d'un clavier contex- 
tualise a chaque type de champ. Safari Mobile en a profite des ses premieres versions pour 
decliner son clavier visuel en plusieurs versions avec un ensemble de touches specifiques ; 
par exemple en affichant par defaut le caractere @ (arobase) pour <i nput type=emai 1 > 
ou les caracteres - (tiret), _ (underscore) et / (slash) pour <i nput type=u rl >. 

Concernant les navigateurs ne supportant pas un type particulier, une detection per- 
mettra - dans le meilleur des cas - de fournir une alternative en JavaScript. II existe 
pour cela deux librairies, H5F et webforms2, pouvant etre utilisees en combinaison 
avec Modernizr. h5Validate se concentre sur la validation avec l'aide de jQuery. 



Ressource Alternatives JavaScript aux formulaires HTML 5 

► https://github.com/ryanseddon/H5F 

► http://code.google.eom/p/webforms2/ 

► http://ericleads.com/h5validate/ 



Neanmoins, il faut toujours garder a l'esprit que la validation des donnees n'est pas a 
la charge de HTML, mais du langage utilise au niveau du serveur. Elle n'est qu'indi- 
cative pour l'utilisateur sur la page, rien ne l'empeche d'envoyer des donnees mal for- 
matees et non securisees, que ce soit intentionnellement ou non. 

Lavantage des controles HTML 5 natifs reside dans un code leger et reactif, qui ne 
doit plus faire appel a des librairies JavaScript complementaires epaulees par des 
feuilles de style specifiques. 
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Tableau 5-52 Tableau de support simplifie des Web Forms 



IMavicjateur 


Version 


Mozilla Firefox 


4+ (types de champs, partiel) 
4+ (validation) 


Internet Explorer 


1 0+ (types de champs, partiel) 
1 0+ (validation) 


Apple Safari 


4+ (types de champs, partiel) 
5+ (validation, partiel) 


Google Chrome 


4+ (types de champs, partiel) 
10+ (validation) 


Opera 


9+ (types de champs) 
10+ (validation) 


iOS (iPhone, iPad, iPod) 


4+ (types de champs, partiel) 


Opera Mobile 


10+ 


Opera Mini 




Android 





Ce tableau n'est que vaguement indicatif. II est tres difficile de le proposer dans cet 
ouvrage, tant les differences entre navigateurs sont sujettes a mouvements et particu- 
larites. L'implementation se fait au compte-gouttes. 



Reportez-vous au site d'accompagnement pour des informations mises a jour sur la prise en charge des 
Web Forms. 

Par exemple, Firefox supporte a partir de sa version 4 les attributs autofocus et 
placeholder, les elements <datalist> ; mais sa version 6 ne dispose pas des types 
color, number, range, datetime, ou des elements <meter> et <progress>. Ces deux 
derniers sont pourtant bien acceptes par Chrome 13+ et Opera 11.5+. Pour obtenir 
plus d'informations a ce sujet, consultez le tableau recapitulatif de Wufoo. 

RESS0URCE Support des HTML 5Forms par Wufoo 

► http://wufoo.com/html5/ 
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(microdata) 



Petits mais costauds, les microformats sont un moyen d'inserer un marquage 
semantique supplemental au sein du document HTML. Le contenu peut 
etre balise plus finement, pour une exploitation automatique par des robots. 




Figure 6-1 Ce robot est joyeux : il vient de decouvrir Microdata 



HTML 5 - Une reference pour le developpement web 

Microdata est une methode d'application des microformats a HTML 5, permettant 
un marquage semantique du contenu (via des attributs specifiques) en complement 
des balises HTML existantes. II s'agit avant tout d'exploiter la puissance des micro- 
formats sans la complexity de RDFa, qui est un standard ayant atteint le statut de 
recommandation W3C en 2008. 



Principe des microformats : vers le Web semantique 

HTML a toujours ete, et sera toujours, un langage de balisage, c'est-a-dire decrivant 
la structure du contenu d'un document. Pour arriver a ses fins, il s'aide d'une collec- 
tion de balises deja bien fournie, telle que decrite dans les chapitres precedents. 

Quiconque debute avec HTML concedera qu'il s'agit la d'une liste bien consequents 
a apprehender. Quiconque manie deja toutes ces balises avec habilete, pourra 
regretter l'absence de balises pour ses propres usages. D'aucuns devront structurer des 
fiches produits sur un site e-commerce, d'autres des calendriers d'evenements, et 
d'autres encore des recettes sur un site de cuisine - avec liste des ingredients, duree 
de realisation, etapes et photos. 

HTML 5 comprend bien des balises indiquant que tel bloc de texte releve d'un titre, 
que telle succession de mots releve d'une liste numerotee ou d'un paragraphe. 
Cependant, elles ne decrivent en rien la nature de leur contenu. Prenons un exemple 
des plus communs. 

Donnees peu structures 

<p>Mon nom est Rodolphe Rimele, man's l'on me connait aussi parfois en tant que 
<i >Dew</i > . Je tiens un blog personnel nomme <a href="http://www.blup.fr">Blup 
</a> a activite variable. <br> 

Je vis a Strasbourg en France et je suis gerant d'Alsacreations aux cotes de 
Raphael Coetter.</p> 

Un humain pourra par son intelligence et ses connaissances « deviner » que Raphael 
Goetter est le nom d'une autre personne et non d'une recette de cuisine, que Stras- 
bourg n'est pas une marque de four micro-ondes, et qu'Alsacreations n'est pas 
(encore) le nom d'un film. 

Une machine aura de fortes chances de ne rien y comprendre, bien que les progres en 
intelligence artificielle soient fulgurants. Tout le monde ne peut s'offrir Deep Blue chez soi. 

Le balisage est crucial sur le Web. Internet est concu pour I'echange des donnees. 
Entre humains, mais aussi entre machines, et entre machines au service des humains 
- il vaut mieux le croire dans ce sens -la. 
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Puisque les humains que nous sommes ne pouvaient pas s'en sortir seuls face au 
volume croissant d'informations accessibles sur la toile, ils ont mis au point les 
annuaires puis les moteurs de recherche. Ils ont delegue le pouvoir de recherche et de 
comprehension, de tri et de categorisation a des algorithmes ne maitrisant pas les six 
millions de formes de communication de C-3PO. 

Pourtant, nous avons toujours dispose de grandes quantites de donnees stockees dans 
des bases SQL, des fichiers XML et binaires, fortement structures par des champs 
precis. Ces champs n'ont par contre de signification que pour le createur du systeme 
de stockage. Des qu'elles « sortent » sur le Web, ces informations se retrouvent en 
images et textes, orphelines de signification propre dans le code source HTML. 

Parmi cette abondance de ressources, il nous est necessaire de delimiter lesquelles 
peuvent presenter un interet dans un contexte particulier, et lesquelles sont perti- 
nentes pour les robots des moteurs de recherche et pour les agents utilisateurs (les 
navigateurs et leurs extensions). 




Certes, <time> est un des nouveaux elements repondant en partie a ces attentes, 
puisqu'il permet precisement de baliser des informations temporelles humaines et de 
les rendre intelligibles numeriquement par le respect d'une notation stricte. Par 
contre, son contenu releve-t-il d'une date de naissance ? De la date de debut d'un 
rendez-vous ou de celle de la fin d'un meeting sportif ? 

II est alors important d'introduire dans le code source HTML une notation seman- 
tique du contenu, indiquant aux etres non organiques de quel vocabulaire releve une 
section de contenu. Ce vocabulaire definit l'usage que Ton peut tirer des informations 
du document : il peut etre relatif a une personne, un evenement, une recette de cui- 
sine, un curriculum vitae, une fiche de lecture d'un livre, etc. Parmi les termes possi- 
bles de ce vocabulaire, les informations doivent etre categorisees plus finement : 
quelles sont celles qui dependent du nom de la personne, de la date de debut de l'eve- 
nement ou de la liste des ingredients de la recette. 
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Figure 6-3 

Zones semantiques 



...J... 

Mon nom est Rodolphe Rimele , maisl'on 

me connait aussi parfoisen tant que Dew r 



Pseudo 




a activite variable. Je visa Strasbourg en 
- France et je suis gerant d' Alsacreations ' 

aux cotes de Raphael Goetter . 

I 



Relation 





■ 




■ 


Societe | 



Le but de ce marquage est de le rendre lisible par les « machines », fut-ce celles de 
Skynet dans Terminator ou de Google. 

Faut-il absolument creer une balise specifique pour chaque usage ? Ne risque-t-on 
pas d'etre submerges par une plethore de definitions et de specifications que peu de 
personnes pourront totalement maitriser et developper ? 

Autant de questions qui ont ete soulevees des l'essor du Web semantique. C'est a 
partir de ce moment que les microformats sont intervenus. 



Figure 6-4 

Logo Microformats 



|I9 microformats 



Les premices 

Initialement, les defenseurs des microformats ont introduit des methodes simples 
telles que l'utilisation de Tattribut class ou rel de HTML pour ajouter arbitraire- 
ment une valeur semantique a un bloc de code. 

Exemple d'evenement defini par un microformat 

<p class="vevent"> 
La <span class="summary">Kiwi Party 2011</span> 
a eu lieu le ler avril 2011 

de <abbr class="dtstart"title="2011-04-01T14:00:00+01:00">14h</abbr> a 

<abbr class="dtend"title="2001-01-01T18:00:00+01:00">18h</abbr>, dans la ville de 

<span class="location">Strasbourg</span> 

(<a class="url" href="http://www.kiwiparty.fr">site officiel</a>) 
</p> 
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Un vocabulaire commun a ete elabore autour de ces classes, pour construire des micro- 
formats tels que hCard (une « carte de visite » inspiree du format vCard), hReview, 
hAtom ou hCalendar dans l'exemple precedent. Un agent utilisateur analysant le code 
pourra comprendre que le bloc portant la classe vevent porte sur un evenement dont 
les modalites sont precisees par les enfants portant d'autres noms de classes definis par 
hCalendar : dtstart pour la date de debut, dtend pour la date de fin. 

Cette technique presente l'inconvenient de ne pouvoir etre reconnue que par les 
algorithmes connaissant ces microformats et de pouvoir etre parasitee par les noms 
de classes destines uniquement aux styles CSS : ecrire un analyseur determinant s'il 
s'agit bien d'un microformat est alors plus complexe. Elle ne fait pas partie de la spe- 
cification HTML et n'est pas indefiniment extensible. En revanche, elle ne perturbe 
pas les navigateurs qui ne la comprennent pas, puisque les chaines de texte utilisables 
dans l'attribut class sont au libre choix du concepteur. 



RESSOURCE Pour en savoir plus a propos des microformats 

Consultez le site de reference 

► http://www.microformats.org/about 

Le Wiki avec les specifications et brouillons 

► http://microformats.org/wiki/Main_Page 
Les microformats sur Alsacreations 

► http://www.alsacreations.eom/tuto/lire/1 21 3-microformats-introduction.html 



RDFa va plus loin en ce sens et presente l'avantage d'etre extensible avec des espaces 
de noms a i'infini, mais l'inconvenient d'avoir ete prevu pour le defunt XHTML 2.0 
et de n'etre en theorie qu'utilisable avec XHTML 1.1. Cette situation devrait rester 
plutot rare comme cela a deja ete precise, en regard des normes les plus repandues et 
exploitables concretement : HTML 4.01 ou XHTML 1.0. 

II necessite de faire appel a des attributs specifiques et a une connaissance des espaces 
de noms qui depassent le souhait de simplicite de HTML, meme si celui-ci fait 
l'objet d'ouvrages de quelques centaines de pages tels que celui-ci. II vaut mieux dis- 
poser d'un jeu de balises limite et refiechi faisant l'objet d'une entente harmonieuse 
des developpeurs web et des editeurs de navigateurs plutot que de voir des pans 
entiers du langage compris uniquement par un nombre limite d'agents utilisateurs. 

Exemple d'usage de RDFa 

<p xml ns : v="http : //rdf . data- vocabul ary .org/#" typeof=" v : Event"> 
La <span property="v:summary">Kiwi Party 2011</span> 

est <span property="v:description">une apres-midi de conferences et d'ateliers 
</span> 
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ayant eu lieu le <span property="v:startDate" 
content="2011-04-01T14:00:00+01:00">ler avril 2011 de 14h</span> a 
<span property="v : endDate" content="2001-01-01T18 : 00 : 00+01 : 00">18h</abbr> , 
dans la ville de 
<span rel="v:location"> 
<span typeof="v:Address"> 

<span property="v : 1 ocal i ty">St rasbou rg</span> 
</span> 
</span> 

(<a rel="v:url" href="http://www.kiwiparty.fr">site of fi ci el </a>) 
</p> 

Dans le cas present, l'attribut typeof introduit le type de format Event, et l'attribut 
property ses differentes proprietes. II est possible d'imbriquer d'autres formats dans 
ce bloc, tels que la localisation geographique dont le type est cette fois Address et qui 
comprend ses proprietes propres. 

Ressource Specification 

RDFa in XHTML: Syntax and Processing 
► http://www.w3.org/TR/rdfa-syntax/ 

Jusqu'a present les microformats sont essentiellement exploites par certains robots 
d'indexation pour moteurs de recherche, et par des extensions pour navigateurs. 



Microdata a la rescousse 

Avec HTML 5, Microdata autorise l'ajout d'un balisage semantique et structure. II 
ne perturbera pas les navigateurs ne le supportant pas. II faut s'attendre a ce que de 
nombreux moteurs d'indexation exploitent ces informations a long terme pour les 
benefices du referencement et des recherches specialisees, et a ce que de nombreux 
outils voient le jour pour les manipuler. 



Ressource Specification Microdata 

Microdata en cours de developpement cote W3C 

► http://dev.w3.org/html5/md/ 
Microdata en tant que standard W3C 

► http://www.w3.org/TR/microdata/ 
Microdata par le WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/complete/microdata.html 
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Attributs globaux et vocabulaires 

Microdata reprend le meilleur des deux methodes par la simple introduction de nou- 
veaux attributs directement au sein de la specification HTML 5. lis possedent 
chacun un role precis et sont applicables a toutes les balises. Exploiter Microdata 
consiste « juste » a l'ajout de ces quelques attributs au contenu. 

Tableau 6-1 Attributs pour Microdata 



Attribut Valeurs Role 



itemscope 
nouveau 


chaTne de caracteres 


Indique que I'element fait appel a un microformat et que ses 
enfants font partie de ce format. 


itemtype 
nouveau 


chaTne de caracteres 


Indique le vocabulaire utilise par le microformat. 


itemprop 
<nouveau> 


chame de caracteres 


Definit une propriete individuelle du microformat. 


itemid 
<nouveau> 


chaTne de caracteres 


Attribue un identifiant unique (defini par le vocabulaire du 
microformat). 


itemref 
<nouveau> 


chaTne de caracteres 


Fait reference a un autre element par son identifiant. 



itemscope 

La portee des annotations est definie par l'attribut itemscope. Ce dernier indique que 
I'element sur lequel il est place et ses descendants constituent un element (un item) rele- 
vant d'un microformat. II doit etre utilise en combinaison avec un attribut i temtype. 

Application d'itemscope 



<p itemscope>Mon nom est Rodolphe Rimele, mans l'on me connaTt aussi 
parfois en tant que <i>Dew</i>. Je tiens un blog personnel nomme 
<a href="http://www.b~lup.fr">B"lup</a> a activite vari abl e . <br> 
Je vis a Strasbourg en France et je suis gerant d ' AT sacreati ons aux 
cotes de Raphael Goetter.</p> 

Cet exemple est bien sur incomplet - pour le moment car on sait que le bloc sera 
dependant d'un format, mais sans savoir encore lequel. 

itemtype 

Lespace de nom (ou namespace) est specifie par l'attribut itemtype. C'est lui qui 
determine le vocabulaire general du format, et sa valeur consiste en une adresse 
(URL) pouvant pointer vers a peu pres n'importe quelle ressource. II faut la consi- 
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derer comme une chaine de caracteres unique que les programmes peuvent recon- 
naitre comme un identifiant afin de determiner la teneur de I'element. 

Une fois cette nature reconnue, un programme sait s'il supporte la lecture du micro- 
format et son interpretation au travers des balises equipees de l'attribut itemprop. 
L'URL n'a pas pour vocation d'etre resolue ou chargee, elle existe pour servir de cle 
unique. Elle n'a meme pas besoin de correspondre a l'adresse d'une page existante, 
bien qu'une documentation accessible par ce moyen soit preferable. 

Application d'itemtype 

<p itemscope itemtype="http: //schema. org/Person">Mon nom est Rodolphe Rimele, 
mais l'on me connait aussi parfois en tant que <i>Dew</i>. Je tiens un blog 
personnel nomme <a href="http://www.blup.fr">Blup</a> a activite variable. <br> 
Je vis a Strasbourg en France et je suis gerant d'Alsacreations aux cotes de 
Raphael Coetter.</p> 

Cet exemple est un peu plus fourni, car on sait desormais que le format qu'il contient 
est celui visant a decrire une personne. Cependant, aucun balisage n'est - pour le 
moment - visible dans son contenu. La valeur d'i temtype est une URL, hebergee sur 
schema.org qui documente le format. Elle donne un contexte dans lequel il est pos- 
sible d'en interpreter les proprietes. 

Yocabulaires 

Tout un chacun peut developper son propre microformat et une syntaxe particuliere, 
mais il faut pouvoir le faire connaitre et le documenter de facon precise afin de lui 
apporter une renommee meritee, et de permettre aux autres machines ou deve- 
loppeurs de l'interpreter. Les types proposes par schema.org et microformats.org 
constituent un echantillon de depart appreciable, schema.org est une initiative com- 
mune des principaux moteurs d'indexation (Bing, Google, Yahoo). 



Ressource Vocabulaires pour Microdata 

Voici les principaux vocabulaires : microformats.org, Schema.org et Data-vocabulary.org. 

► http://microformats.Org/wiki/Main_Page#Specifications 

► http://schema.org/docs/full.html 

► http://www.data-vocabulary.org/ 



Au moment de la redaction de la redaction de cet ouvrage, le standard vivant du 
WhatWG inclut egalement la definition de trois types. 
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Tableau 6-2 Vocabulaires proposes par le WhatWG 



Format 


Description 


itemtype 


vCard 


Informations de contact au sujet d'une 
personne ou d'une organisation 


http://microformats.org/profile/hcard 


vEvent 


Evenement calendaire 


http://microformats.Org/profile/hcalendar#vevent 


Licensing works 


Guvre (article, image, video, audio) 
accompagnee d'une information de licence 


http://n.whatwg.org/work 



Deux d'entre eux sont directement bases sur la proposition initiale des microformats 
et comportent de nombreux champs detailles dans la specification. 

Les vocabulaires peuvent tout a fait etre imbriques et dependre l'un de l'autre. On 
parle alors de microformat compose. Ainsi, un format devant definir une personne 
ou un evenement pourra tout a fait comprendre un « sous-format » d'emplacement 
geographique, qu'il sera inutile de redefinir entierement pour l'occasion puisqu'il aura 
deja ete specifie. Ce principe est represente sur schema.org par la hierarchie des for- 
mats proposes : une chose {Thing) peut etre une oeuvre (Creative Work), de cinema 
(Movie), a l'initiative d'un producteur (Person) faisant partie d'une compagnie (Orga- 
nization) possedant une adresse postale (Place) geolocalisee (GeoCoordinates), etc. Les 
possibilites sont infinies ! 

Dans la vision Microdata de Google, une offre de vente sur un site de commerce ou 
d'encheres (format Offer) pourra comprendre a la fois une reference a un produit 
(format Product) et a un vendeur qui peut consister en une personne (format Person) 
ou une societe (format Organization). 

Imbrication de formats 

<div itemscope itemtype="http: //schema. org/Offer"> 

<!-- Details de 1' offre --> 

<div itemprop="seller" itemscope itemtype="http: //schema. org/Person"> 

<!-- Details du vendeur (de la personne) --> 
</di v> 

<div itemprop="itemOffered" itemscope itemtype="http: //schema. org/Product"> 

<!-- Details du produit --> 
</di v> 
</di v> 

Cette methode permet la reutilisation des formats dans un arbre logique. La relation 
est maintenue avec l'attribut itemprop qui precise quelles proprietes (ici seller et 
i temOffered) sont liees a quels types (ici Person et Product au sein d'Offer). 
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itemprop 

La cle est donnee par l'attribut itemprop. Cette cle ouvre la comprehension du con- 
tenu de 1' element defini par son microformat, puisqu'elle balise ses differentes pro- 
prietes. II s'agit en quelque sorte du decoupage final des champs, permettant leur 
extraction individuelle par une intelligence artificielle. 

On peut assimiler itemprop a I'intitule des colonnes de la base de donnees (pour une 
personne : prenom, nom, date de naissance, adresse, pays, etc.), et le contenu de 
l'element HTML equipe de cet attribut aux valeurs des differentes cellules d'un 
enregistrement (Lucas, Miiller, 4 octobre 1472, Weimar, Allemagne). 

Application d'itemprop 

<p itemscope itemtype="http: //schema. org/Person">Mon nom est <span 
itemprop="name">Rodol phe Rimele</span>, mais l'on me connait aussi parfois en 
tant que <i itemprop="nickname">Dew</i>. Je tiens un blog personnel nomme <a 
href="http://www. blup.fr" itemprop="url ">B1 up</a> a activite variable. <br> 
Je vis a 

<span itemprop="address"> 
<span itemscope itemtype="http://schema.org/PostalAddress"> 
<span itemprop="addressLocal ity">Strasbourg</span> en 
<span itemprop="addressCountry">France</span> 

</span> 
</span> 

et je suis <span itemprop="jobTitle">gerant</span> 

d ' <a href="http : //www. al sacreati ons . f r/" itemprop="worksFor">Al sacreati ons</a> 
aux cotes de <span itemprop="colleagues">Raphael Coetter</span>.</p> 

Toutes les proprietes possibles ne sont pas utilisees dans cet exemple, cependant il n'est pas 
necessaire de les couvrir toutes afin que le microformat soit comprehensible. Bien sur, cette 
application necessite l'ajout de plusieurs balises <span>, car il s'agit d'un simple paragraphe 
balise pour lequel aucun autre element HTML ne peut etre applique a meilleur escient, du 
moins pas sans conserver le cote neutre et la presentation initiale du texte. 

Si l'une des proprietes releve d'un autre microformat, il suffit d'y appliquer une nou- 
velle fois les attributs itemscope et itemtype correctement renseignes. 

II est tout a fait autorise d'utiliser deux proprietes possedant la meme designation - par 
exemple deux itemprop="url " - dans le meme bloc formate. Leur signification com- 
mune sera la designation de deux possibilites de valeurs differentes. Inversement, un 
attribut itemprop peut comporter le nom de plusieurs proprietes separees par des 
espaces si leur valeur est commune, afin d'eviter la duplication du contenu. 

Les valeurs admissibles ne sont pas limitees au seul contenu texte. Une propriete peut pos- 
seder une valeur issue de rattribut h ref des elements <a>, <1 i nk>, <area> ou de l'attribut 
src des elements <img>, <audio>, <embed>, <iframe>, <source>, <track>, <video>, 
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voire de l'attribut data de <object>. Ce sont alors des ressources externes. S'il s'agit d'un 
element temporel (dates, heures), l'attribut datetime de lelement time peut etre mis a 
contribution. S'il s'agit d'un element <meta>, la valeur est celle de l'attribut content. 

Le format Licensing works se prete bien a cette definition, car il peut faire intervenir un 
lien vers une ressource image (l'ceuvre), et un lien vers un document decrivant la licence 
qui s'y applique. 

Tableau 6-3 Proprietes du format Licensing works propose par le WhatWG 



itemprop 


Description 


Valeur 


Occurrences 


work 


Identifie I'oeuvre. 


URLabsolue 


une seule 


title 


Titre de I'oeuvre. 


Texte 


une seule 


author 


Nom ou informations de contact 

de I'un des auteurs/createurs de l'ceuvre 


Texte ou format vCard 


une ou plusieurs 


1 i cense 


Identifie I'une des licences sous laquelle 
I'oeuvre est publiee. 


URLabsolue 


une ou plusieurs 



Exemple d'usage du format Licensing works 

<figure itemscope itemtype="http://n. whatwg.org/work"> 
<img itemprop="work" src="monoeuvre. jpg"> 
<figcaption> 

<pxcite itemprop="title">Mon oeuvre ori gi nal e</ci tex/p> 
<pxsmall>Publie sous licence <a itemprop="l i cense" 
href="http : //creati vecommons . org/1 i censes/by-sa/3 . 0/deed . f r"> 
Creative Commons Paternite - Partage des Conditions Initiales a 
l'Identique 3.0</ax/smallx/p> 

</figcaption> 
</figure> 

Cette ceuvre est balisee par trois proprietes. Son titre correspond a la propriete ti tl e 
qui adopte la valeur texte de l'element <cite>. L'ceuvre en elle-meme est une image, 
done la propriete work prend la valeur de l'attribut src. La reference a la licence est 
etablie par la propriete license qui, etant placee sur un lien, prend la valeur de 
l'attribut href, et non de la valeur texte du lien. 

itemid 

Un element relie a un format par les attributs decrits precedemment peut facultative- 
ment etre identifie de facon unique dans le vocabulaire par son attribut itemid. C'est 
un moyen de pouvoir etablir un lien de maniere formelle entre une base de donnees 
complete et un element balise. 
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II peut etre rapproche du numero ISBN pour un livre ou du numero de securite 
sociale pour un citoyen francais, et n'a de signification que dans le contexte du type 
de vocabulaire donne. 

Application d'itemid 

<div itemscope i temtype="http : //schema. org/Product" 
itemid="urn:isbn:978-2-212-12826-0"> 

<hl i temprop="name">CSS avancees</hl> 
<!-- Details de l'ouvrage --> 
</d"i v> 

Dans le cas present, il s'agit d'une reference ISBN mentionnee dans une adresse 
URN (Uniform Resource Name), specifiee par la RFC 3187. Les URN et URL font 
partie de la famille des XJRl(Uniform Resource Identifiers). Les premiers definissent 
une ressource independamment de son emplacement, tandis que les deuxiemes pre- 
cisent une methode d'acces complete, en general avec un protocole et un nom d'hote. 

itemref 

II n'est pas toujours possible d'enchainer toutes les proprietes d'un element devant etre 
decrit par un format au sein d'un meme bloc possedant l'attribut i temscope. Certaines 
informations peuvent etre amenees a figurer a un autre endroit du document, ulterieu- 
rement dans le flux, en dehors du parent definissant le vocabulaire. C'est a ce moment 
que l'attribut i temref intervient en faisant reference a leurs identifiants uniques (c'est- 
a-dire en nommant leur(s) attribut(s) i d separes par des espaces s'il y a lieu). 

Application d'itemref 

<div itemscope itemtype="http://schema.org/Organization" itemref="infogeo"> 

<p i temprop="name">Al sacreati ons</p> 

<p itemprop="description">Agence web exotique</p> 

<p i temprop="url ">http ://www. al sacreati ons . f r/</p> 

<!-- Autres details sur la societe --> 
</di v> 

<!-- Suite du contenu sur la page... --> 
<footer> 

<p id="infogeo"itemprop="address" itemscope 
itemtype="http: //schema. org/Postal Address "> 
Nous sommes bases a 

<span itemprop="addressLocal ity">Strasbourg</span> en 
<span itemprop="addressRegion">Al sace</span> 
(<span itemprop="addressCountry">France</span>) <br> 
Tel : <span itemprop="telephone">13 37 13 37</span> 
</p> 
</footer> 
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Cette souplesse autorise l'application de Microdata a des pages HTML existantes, sans 
devoir les restructurer specifiquement a cet usage. Dans l'exemple precedent, les informa- 
tions sur l'adresse sont placees dans le pied de page, et Ton ne souhaite pas les dupliquer. Le 
bloc d'informations est pourtant une dependance de la premiere declaration pour sa pro- 
priete address. Le lien est etabli grace a i temref qui porte la valeur de l'identifiant unique 
i d de l'element que Ton souhaite integrer comme propriete du format Organization. 



Ressource Modeles pour Microdata 

HTML 5 Microdata Templates 

► http://microdata.freebaseapps.com/ 



API DOM Microdata 

La specification complete Microdata par une API DOM : celle-ci doit permettre 
l'extraction des elements balises par Microdata dans un document, ainsi que leurs 
proprietes et valeurs. 



Ressource API Microdata 

Microdata API cote W3C 

► http://www.w3.Org/TR/microdata/#using-the-microdata-dom-api 
Microdata API en developpement cote W3C 

► http://dev.w3.Org/html5/md/#using-the-microdata-dom-api 
Microdata API cote WhatWG 

► http://www.whatwg.Org/specs/web-apps/current-work/multipage/links.html#microdata-dom-api 

Au moment de la redaction de cet ouvrage, son support est quasi inexistant. C'est 
pourquoi il est recommande de se tourner temporairement vers des alternatives en 
JavaScript, bien souvent retrocompatibles jusqu'a Internet Explorer 6, ce qui nous 
fait retourner assez loin dans le temps pour ne pas sen priver. Jusqu'a ce que tous les 
navigateurs implementent 1API de facon native, ces librairies les epauleront via 
JavaScript. Ce n'est pas un frein a l'utilisation de Microdata, car son principal interet 
reste bien sur 1' analyse semantique du contenu, principalement par les moteurs 
d'indexation qui ne sont pas dependants des navigateurs. 

Parmi les alternatives, microdatajs dispose a la fois d'une version construite sur une 
base de JavaScript pur et dur, et d'une version orientee pour jQuery. Elle jongle avec 
JSON, RDF autour de Microdata et d'autres formats vCard, vEvent, iCal. 

Microformatshiv est en revanche destinee aux microformats initiaux (hCard, hCa- 
lendar, hResume, hReview, hAtom, XFN, adr, geo, tag) et produit une structure de 
donnees JavaScript appropriee pour tout format lisible sur la page. 
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Ressource API Microdata 

Librairie JavaScript pour Microdata 

► http://gitorious.org/microdatajs 

Analyse de la syntaxe en ligne (vers JSON, Turtle, vCard, iCal) 

► Foolip.org/microdatajs/live 
Librairie JavaScript pour Microformats 

► http://microformatshiv.com/ 



Dans les exemples suivants, tous les tests ont ete realises de facon pratique avec 
microdatajs, c'est-a-dire en incluant cette librairie, telechargee depuis son site officiel, 
avec une application du format Licensing works du WhatWG. 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<meta charset="utf-8"> 

<title>Microdata API</title> 

<script src="microdata. js"x/script> 
</head> 
<body> 

<!-- Oeuvre balisee par Microdata --> 

<figure itemscope i temtype="http : //n . whatwg . org/work"> 

<img i temprop="work" src="monoeuvre. jpg"> 

<figcaption> 

<pxcite itemprop="title">Mon oeuvre originale</citex/p> 
<pxsmall>Publie sous licence <a itemprop="license" 
href="http : //creati vecommons .org/1 i censes/by- sa/3 . 0/ 

deed . f r">Creati ve Commons Paternite - Partage des Conditions Initiales a 

l'Identique 3 .0</ax/smallx/p> 

</figcaption> 

</figure> 

<!-- Fin de 1 'oeuvre --> 

</body> 
</html> 

document.getltemsO 

La methode document.getltemsO retourne les elements balises par Microdata, 
c'est-a-dire ceux equipes d'un attribut itemscope. Elle permet egalement de les fil- 
trer par type si celui-ci (ou ceux-ci, separes par des espaces) est precise en argument. 
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Detection de I'API Microdata 

i f( !! document . getltems) { 
// L'API est disponible 
} else { 

// Ce navigateur ne supporte pas "I'API Microdata 

} 

La presence de I'API, ou d'une librairie JavaScript la remplacant, est detectee par la 
presence de cette fonction, membre de l'objet global document. 

Un appel a getltems () avec FURL du type http://n. whatwg.org/work renvoie une 
liste des elements HTML (de type NodeList) auxquels un microformat Licensing 
works a ete applique. 

Exemple d'usage de la methode getltems 

var oeuvres = document. getltems ("http : //n. whatwg. org/work") ; 

Cette collection peut etre parcourue de maniere iterative. On connait sa longueur 
grace a sa propriete 1 ength qui est un des fondamentaux de JavaScript lorsqu'il s'agit 
de denombrer les elements d'un tableau ou d'une collection d'objets. 

// Longueur de la collection d'elements 
oeuvres. length; 

itemType, itemRef, itemld 

Si la selection est faite au sens large et que Ton souhaite determiner le type des ele- 
ments obtenus, il est possible d'interroger leur propriete i temType qui reflete directe- 
ment la valeur de l'attribut eponyme. II en est de meme pour i temRef et i temld s'ils 
sont presents. 

Interrogation des proprietes des elements obtenus 

// Premier element 
oeuvres [0] ; 

// Type du premier element 
oeuvres [0] . i temType ; 
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L'integralite des proprieties sont referencees dans l'interface properties (de type 
HTMLPropertiesCollection) pour chaque objet element. 

// Proprietes du premier element 
oeuvres[0] .properties; 

On peut proceder a une enumeration de toutes ces proprietes, et obtenir la liste com- 
plete des cles utilisees en tant qu'itemprop. 

// Noms des proprietes appliquees au premier element 
oeuvres[0] . properti es . names ; 

properties, namedltem 

La methode namedltemO equipant la collection de proprietes renvoie une liste de 
proprietes (de type PropertyNodeLi st) repondant au nom souhaite. Attention, on 
obtient bien ici une liste qui peut comporter plusieurs elements et non un element 
unique, etant donne que le balisage Microdata peut comporter plusieurs proprietes 
i temprop dotees du meme nom pour un seul i temscope. 

// Liste des proprietes possedant pour cle "title" 
oeuvres [0] . properti es . namedltem ("ti tl e") ; 

// Liste complete des valeurs 

oeuvres [0] . properti es . namedltem ("ti tl e") . val ues ; 

itemValue 

Afin de prendre connaissance des valeurs individuelles, il est possible de s'adresser la 
aussi iterativement a chacun des elements retournes par la methode namedltemO, et 
surtout d'exploiter la propriete i temVal ue pour en obtenir la valeur propre. 

// Premiere occurrence 

oeuvres [0] . properti es . namedltem ("ti tl e") [0] ; 
// Valeur de la premiere occurrence 

oeuvres [0] . properti es . namedltem ("ti tl e") [0] . i temVal ue ; 

// ou... Valeur texte de la premiere occurrence 
oeuvres[0] . properti es . namedltem("ti tl e") [0] . textContent ; 
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Figure 6-5 

Resultat de I'exploration 
dans la console de Chrome 



' Microdata API 

<- a ti q. 







Mon oeuvre originals 

Publie sous licence Creative Commons Fatemite -Fartage des Conditions 
Initiales alZdentique l.Z 



^Jiy I Errors Warnings Logs 



war oeuvres = document .get It ens ( "http: //n .whatwg.org/work") ; 
oeuvres; 

[ ► <f igure itemscope itemtype="http: //n .whatwg.org/work">...</f igure>] 

oeuvres .length; 

1 

oeuvres[9] .iternType; 

" htt p : / / n . wh at wg . o r g/ work " 

oeuvres [9] .properties; 

[<img itemprop="work" src=" mon oeuvre . jpg "> ■ 

<cite itemprop= "title ">J1on oeuvre originale</cite>j 

<a itemprop="license" href="http: //creativecommons .org/licenses/by-sa/ 
3 . 8/deed . fr "^Creative Commons Paternite - Partage des Conditions 
Initiales a l'Identique 3.&</u> 
] 

oeuvres [9] .properties .names; 

["work"., "title"j "license"] 

oeuvres[0] .properties .namedltem( "title") ; 

[<cite it emprop= "title ">Hon oeuvre originale</cite>] 

oeuvres[0] .properties .namedltem( "title") .values; 

["Mon oeuvre originale"] 

oeuvres[0] .properties .namedltem( "title") [8] .itemValue; 
"Hon oeuvre originale" 



Le script suivant est destine a afficher de maniere sommaire en texte brut les pro- 
prietes et les valeurs des elements obtenus avec l'API DOM Microdata. 
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Exemple complet de parcours des elements avec Microdata 

var microelements = document . getltemsO ; 

// Sortie 

var debug = document. createElement('div') ; 

// Boucle sur les elements obtenus 
f or (i =0 ; i <mi croel ements . 1 ength ; i ++) { 

debug . i nnerHTML += "<b>" + i + "</b> : " + mi croel ements [i ] .itemType; 

// Boucle sur les proprietes detectees 

for(j=0 ; j<mi croel ements [i ] . properti es . names . 1 ength ; { 
var prop = microelements[i] .properties. names[j] ; 
var items = mi croel ements [i] .properti es. namedltem(prop) ; 
debug . i nnerHTML += "<br>" + mi croel ements [i ] .properties. names[j]+" = "; 

// Propriete est indefinie 
if (items. length==0) { 

debug . i nnerHTML += "indefini"; 

// Propriete unique 

} else if(i terns. length==l) { 

debug . i nnerHTML += i terns [0] .itemValue; 

// Propriete multiple 
} else { 

for(k=0;k<i terns. 1 ength ;k++) { 

debug . i nnerHTML += i terns [k] . i temVal ue+" "; 

} 

} 

} 

debug . i nnerHTML += "<brxbr>"; 

} 

document . body . appendChi 1 d (debug) ; 



Rich Snippets 

Ainsi que l'autorise la specification, la valeur d'i temtype peut consister en une adresse 
relative a un vocabulaire personnel ou caracteristique d'une societe, a un algorithme 
d'indexation concu sur mesure, ou a un format qui n'a encore jamais ete defini. 

Un moteur de recherche peut proposer ses propres vocabulaires a destination des 
sites souhaitant etre indexes de maniere optimale, non seulement dans l'index 
general, mais avec une personnalisation des resultats affiches. Un des benefices 
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immediats repondant a cette definition est l'utilisation des microformats reconnus 
par Google. lis alimentent le robot d'indexation en donnees correctement structurees 
pour presenter des resultats de recherche pertinents et « enrichis ». 



Figure 6-6 

Rich Snippets sur Google 



alien s Stardust diner review 



Z~ rcr E-: ;c; itv jI?:-; :~ :ty Recherche avarcee 

Ellen's Stardust Diner, Mew York- Avis sur les restaurants — [±7] Q. 

www.t ri pa dvi sor.fr > ... > Restaurants > Ellen's Stardust Diner - En cache 
340 avis 

Ellen's Stardust Diner, New York : consultez 340 avis sur Ellen's Stardust Diner, note 3.5 
sur 5 sur TripAdvisor et classe #404 sur 6 847 restaurants a New ... 



Ellen's Stardust Diner, Mew York City - Restaurant Reviews ... I +7] Q, . \ Traduire cette page | 

www tripadvisor.coim > ... > Restaurants > Ellen's Stardust Diner - En cache 
340 avis 

3 days ago - Ellen's Stardust Diner. New York City: See 340 unbiased reviews of Ellen's 
Stardust Diner, rated 3.S of 5 on TripAdvisor and ranked #404 of ... 



Ellen's Stardust Diner -Theater District -New York, NY I *T\ Q. . [ Traduire cette page ] 

www.yelp.com > Restaurants i Diners - En cache 
163 avis - Prix : 

163 Reviews of Ellen's Stardust Diner "Summary: Food. Meh. Average but with good 
selection. My dining mate loved the coffee I don't drink it, myself. 

Menus - Ellen's Stardust Diner LEI Q. - [ Traduire cette page ] 

ellensstardustdiner com/menu html - En cache 

page 1|; page 2\; page 3[; page 4. Ellens Stardust Diner. Menus Our Singers Tour Groups 
Catering Getting Here Contact Us Miss Subways Gallery ... 
Getting Here - Our Singers - Miss Subways Gallery - Tour Groups 



La documentation de Google comprend de nombreuses informations au sujet des 
formats exploitables pour le robot d'indexation. 



RESS0URCE Google Rich Snippets 




Principe general pour Microdata, microformats et RDFa 




► http://www.google.com/support/webmasters/bin/topic.py?topic=21997 




Organisations et entreprises 




► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer= 


=146861 


Personnes 




► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer= 


=146646 


Evenements 




► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer= 


=164506 


Avis 




► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer= 


=146645 


Notes associees aux avis 




► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer= 


=172705 


Recettes de cuisine 




► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer= 


=173379 
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Produits (shopping) 

► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer=1 095551 
Fils d'Ariane 

► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer=1 8541 7 
Offres 

► http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer=1 46750 
Outil de test des microformats embarques dans une page 

► http://www.google.com/webmasters/tools/richsnippets 
Plus d'informations au sujet des Rich Snippets 

► http://knol.google.eom/k/google-rich-snippets-tips-and-tricks 



L'interet majeur de Microdata est cependant de pouvoir baliser un document avec un 
vocabulaire compris par de multiples entites se mettant d'accord pour utiliser les 
memes conventions. C'est l'objet de schema.org qui a pour vocation de devenir une 
reference pour les principaux moteurs de recherche. 
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Et, malgre la guerre des codecs, le Web fut conquis par les videos de 
chats. Videos et sons purent etre integres, et leur lecture controlee. 




Figure 7-1 L'ancetre de <audio> 
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Pour comprendre les tenants et aboutissants de la video et de l'audio sur le Web, il 
faut se souvenir du passe tourmente qu'ont traverse ces deux types de medias. 

Durant de nombreuses annees, le debit offert par les connexions classiques au reseau 
etait trop limite pour que Ton puisse considerer la transmission des quantites de don- 
nees requises pour des sons et radios de bonne qualite, encore plus pour les videos. 
Que ce soit a la demande pour la lecture d'un fichier precis ou en streaming pour la 
diffusion en continu, le goulot d'etranglement residait avant tout dans la capacite des 
tuyaux, celle des serveurs devant repondre aux requetes, et celle des ordinateurs 
detenus par les utilisateurs finaux. 

Avec l'avenement des connexions haut debit, et la democratisation de Faeces Internet 
pour tous, des millions d'usagers ont suscite de nouveaux besoins. Le partage initie 
par les reseaux peer-to-peer et le format de compression audio MP3 a redefini 
Internet comme un moyen d'acceder a du contenu musical (avec les interrogations 
sur les droits d'auteur que Ton connait). 

Les sites d'information et de divertissement ont vu dans l'audio et la video un moyen 
d'agrementer leur contenu, d'ameliorer leur attractivite et de proposer des services au 
monde entier sans limitation geographique de diffusion. 

Or, le Web n'avait rien prevu pour ces medias. Ou quasiment rien. Les images dispo- 
saient de leurs formats de predilection GIF et JPEG (puis PNG), qui ont toujours a 
peu pres fait l'unanimite. Mais les questions afferentes aux formats de compression 
pour le son et les sequences video et a leurs licences, ajoutees a la multiplicite des 
plates-formes et au fait que la norme HTML ne prevoyait pas l'emploi de tels ele- 
ments au sein des pages ont cree un fiou autour des techniques a privilegier. 

De nombreux codecs (precedes de compression-decompression) ont vu le jour. Ce 
fut la periode de gloire de RealVideo (RealNetWorks), QuickTime (Apple) et 
d'autres solutions proprietaires qui necessitaient toujours d'installer un plug-in pour 
le navigateur, avec parfois bien d'autres desagrements visibles sur le systeme apres 
Installation. Les balises <embed> et <object> pouvaient faire appel a des types de 
fichiers medias varies, mais sans garantie de resultat chez le visiteur du site tant que 
celui-ci n'avait pas installe le codec correspondant. 

Les formats se sont succedes, la puissance et les algorithmes de compression se sont 
ameliores. Les usages se sont diversifies, les radios se sont peu a peu orientees vers le 
MP3 pour diffuser des flux de meilleure qualite en Shoutcast/Icecast. Macromedia - 
absorbe depuis par Adobe - en a ajoute le support dans Flash 4 sorti en 1999. 

Avec les parts de marche croissantes de ce plug-in leger et 1'introduction de la video dans 
les animations puis en streaming (avec differentes etapes et qualites entre 2002 et 2005), 
de grands sites de partage video ont pu voir le jour. Notamment YouTube, Dailymotion 
et Vimeo a un mois d'intervalle debut 2005. Des milliards de videos ont pu etre vision- 
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nees quotidiennement grace a ce moyen et Flash est devenu de facto une alternative cre- 
dible, mais toujours proprietaire. Adobe a profite de ce vide dans la specification 
HTML. Apple l'a par contre boude sur ses plates-formes mobiles jusqu'a present. 



Figure 7-2 

Vimeo 




Apres avoir revolutionne le marche de la musique et du disque, Internet a defie la 
television, les sites de catch-up TV (rattrapage) ont trouve un modele economique et 
la video en haute definition a pu prendre son essor. 

En soi, ces medias sont depuis bien longtemps manipules par les ordinateurs pour 
etre diffuses par d'autres moyens. Le Web n'avait tout simplement pas anticipe une 
telle deferlante. Depuis lors, le WhatWG et le W3C ont pu prendre en compte cette 
evolution pour proposer une reponse concrete: l'idee des elements <audio> et 
<vi deo> de HTML 5 est d'harmoniser tout cet univers et d'en simplifier grande- 
ment l'insertion dans les pages web avec une lecture native dans le navigateur, sans 
necessiter de plug-in supplemental. 

Et pourquoi pas aussi, creer de nouveaux usages interactifs ? Etant donne qu'il s'agit 
alors d'elements au meme titre que les autres, il est possible de leur affecter des effets 
de style en CSS et des transformations, ainsi que de les piloter avec les fonctions 
DOM et interagir avec leur contenu avec JavaScript. 

Conteneurs, codecs, licences et support 

Malheureusement, tout n'est pas si idyllique. Sur le papier, la specification promet un 
usage relativement simple en regard de ce qui se fait pour les autres elements pouvant 
composer un document HTML. 
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Dans la pratique, les editeurs de navigateurs et les redacteurs des groupes de travail 
n'ont pu se mettre d'accord sur la solution technique a preconiser en termes de 
format et de conteneur. La problematique actuelle reside surtout dans la multiplicite 
des solutions de decodage de la video. Plusieurs philosophies s'affrontent, guidees 
par des imperatifs economiques ou par la volonte d'user de technologies libres et 
ouvertes. HTML 5 ne definit - a l'heure actuelle - aucune norme precise a supporter 
au travers de la balise <video> ou <audio>. 

II convient de distinguer egalement le conteneur, de la norme et du format de 
compression : 

• Un codec (combinaison en anglais de code- decode) est un precede de rampression- 
afeompression d'un signal numerique permettant de generer un flux respectant 
une norme. MPEG-4 AVC/H.264 est une norme decrivant un format de don- 
nees, etx264 un codec repondant a cette norme. 

• Un conteneur est une structure de fichier permettant de regrouper (entrelacer) des 
flux video et audio ainsi que d'autres meta-informations telles que les sous-titres ou 
le chapitrage. Toutes les normes et tous les codecs existants ne peuvent etre encap- 
sules dans chacun des conteneurs : ils ont des affinites, car ayant ete la plupart du 
temps penses ou developpes les uns pour les autres. En general, une extension de 
fichier (.ogg, .avi, .webm) fait reference au conteneur et non au codec. 

Tableau 7-1 Quelques conteneurs populaires 
Norn Extension Origine Details et affinites 



Advanced Streaming . asf 
Format 


Microsoft 


Conteneur pour WMA, WMV, MPEG4, etc. 


Audio Video Interleave 


. avi 


Microsoft 


Ancien format limite en fonctionnalites, conte- 
neur historique pour de nombreux flux. 


Flash Video 


.flv, .f4v 


Adobe 


Conteneur dedie au plug-in Flash pour flux 
derive du H.264 ou VP6 (On2), PCM et MP3. 


Matroska 


.mkv, .mka, 
. mks 


Matroska.org 
(format ouvert) 


Conteneur pour de nombreux codecs tels que 
DivX, XviD, H.264, Theora, VP8, Vorbis, AAC, 
MP3, AC3, DTS, PCM, FLAC, et sous-titres 
SubRip, VobSub, etc. 


MP4ou MPEG-4 Part 14 


.mp4, .m4v 


ISO 


Derive de QuickTime, conteneur pour H.264/ 
MPEG-4 AVC, AAC, etc. 


MPEG PS/TS 


.mpg, .mpeg, 
.ps 


MPEG 


Conteneur pour de nombreux formats MPEG. 


ogg 


.ogg, .oga, 
.ogv, .ogx 


Xiph.org 
(format ouvert) 


Conteneur pour Theora, Vorbis et autres FLAC, 
Speex, etc. 


QuickTime 


.mov 


Apple 


Conteneur pour nombreux formats MPEG-1 , 
MPEG-2, MPEG-4, H.263, H.264, AAC, 3GPP, etc. 
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Tableau 7-1 Quelques conteneurs populaires (suite) 



Norn 


Extension 


Origine 


Details et affinites 


VOB 


. vob 


DVD Forum 


Pour les DVD (MPEG-2 et MPEG-1 Audio Layer 
II). 


WebM 


.webm 


Google 


Conteneur pour VP8 et Ogg Vorbis derive de 






(format ouvert) 


Matroska. 



Les normes et codecs video courants sont MPEG-1, MPEG-2, MPEG-4, H.264/ 
MPEG-4 AVC, DivX (derive de H.263 et H.264), Ogg Theora, VC-1, VP8, 
WebM, WMV (Windows Media Video par Microsoft), XviD, etc. 

Les codecs audio courants sont MP3 (MPEG-1/2 Audio Level III), AAC, APE, 
FLAC, Ogg Vorbis, WMA (Windows Media Audio), RealAudio, AC-3, DTS, 
PCM (.wav). 

Video 

En ce qui concerne la video pour le Web, au moment de la redaction de cet ouvrage 
existent trois leaders. Reportez-vous egalement au tableau de support en fin de chapitre. 

Theora 

Theora etait pressenti pour figurer en bonne place dans la specification HTML 
comme format video de predilection, mais a ete retire apres de nombreux debats 
opposant les membres ayant des interets dans des formats concurrents. 

On le retrouve majoritairement dans un conteneur Ogg. II est issu directement du 
monde du lib re, sans brevets, et defendu a l'origine par Mozilla puis implemente par 
Opera et Google Chrome. II est base sur le codec libre de droits VP3 de On2 Tech- 
nologies. Ogg Vorbis est son jumeau pour l'audio. 

Figure 7-3 

Logo de Theora 
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WebM 

WebM est soutenu par Mozilla, Opera et Google qui en est a l'origine. 

Son conteneur est derive de Matroska et son codec video de VP8, une autre realisa- 
tion de On2 qui a desormais ete rachete par Google en 2010 avec l'intention de le 
liberer de ses brevets. Son utilisation est totalement gratuite, libre de tous droits, 
maintenant et dans le futur. L'audio est encode en Ogg Vorbis. Aucun autre codec 
video ou audio nest supporte dans un but d'implementation integrale de ce format. 
Sa qualite est equivalente au H.264. 

Le groupe de travail du WebM souhaite apporter son support aux navigateurs refrac- 
taires ou anciens grace a des extensions specifiques. Adobe a annonce son prochain 
support au sein de Flash. 

Figure 7-4 

Logo WebM 



Google a publie des la sortie de la version finale d'Internet Explorer 9 un plug-in lui 
apportant le support du format WebM. 



Ressource Plug-in WebM pour IE9 par Google 

WebM Video pour Microsoft Internet Explorer 9 

► http://tools.google.com/dlpage/webmmf 
Autres ressources et decodeurs WebM 

► https://code.google.eom/p/webm/ 



H.264 

Aussi denomme MPEG-4/AVC, le format H.264 est mis en avant par Apple pour Safari 
et ses plates-formes mobiles sous iOS. Internet Explorer 9 l'implemente egalement. 

Son avantage est de fournir une bonne qualite d'image, meme a bas debit, par I'eta- 
blissement de differents profils qui definissent chacun des parametres pour la com- 
pression et decompression des flux (en termes de puissance, de resolution, de fonc- 
tionnalites, etc.). II est relativement repandu dans les moyens de diffusion en haute 
definition et est lu par de nombreux mobiles et consoles avec decodage materiel (ce 
qui est un plus indeniable pour economiser de la batterie). 

Son principal inconvenient est qu'il depend directement d'un partenariat nomme 
The Joint Video Team et de groupes possedant des interets economiques, dont le 
consortium MPEG. Etant soumis a des brevets logiciels (pour le moins controverses 
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en Europe), il oblige le paiement de droits d'exploitation pour les programmes qui le 
produisent ou le lisent. On le retrouve dans les disques Blu-Ray. 



Ann de contrer l'interet pour les codecs libres, le consortium MPEG a decide d'accorder 
une gratuite d'usage de la licence jusqu'en 2015 pour les videos non payantes. Apres cette 
date, rien n'empeche les ayants droit de reclamer de substantielles royalties. C'est pour- 
quoi Mozilla et Opera n'ont jamais souhaite le prendre en consideration. 

Dans un premier temps implemente par Google Chrome, il a ete abandonne au 
profit de WebM pour defendre les solutions Open Source et empecher la naissance 
d'un monopole. Microsoft (sic !) a par la suite propose une extension specifique a 
Chrome 8+ sous Windows 7 afin de lui rendre le support de H.264. 

RESSOURCE Plug-in H.264 pour Google Chrome sous Windows 7 

Windows Media Player HTML 5 Extension for Chrome 
► http://www.interoperabilitybridges.com/wmp-extension-for-chrome 



En ce qui concerne l'audio pour le Web, au moment de la redaction de cet ouvrage 
existent egalement trois leaders. Leur support est variable, dependant de l'embarque- 
ment de codecs par les navigateurs, les plug-ins ou par le systeme d'exploitation. 

MP3 (Mpeg-1 Audio Layer 3) 

II est inutile de presenter ce celebre et controverse format de compression audio ne 
en 1991 qui a provoque l'essor de la musique numerique sur Internet. Malgre sa 
popularite, il faut savoir que ce format est toujours soumis a des brevets. Meme s'il 
est lu par tous les lecteurs portables du marche et s'il existe des dizaines de pro- 
grammes pour compresser l'audio en MP3, il reste dependant de licences restrictives. 

La plupart des conteneurs video supportent un flux audio MP3 sur deux canaux. La 
norme definit la facon dont il est decode, mais laisse libre choix sur les algorithmes 
d'encodage. II existe done plusieurs methodes pour y parvenir avec des resultats 



Figure 7-5 

Logo H.264 




Audio 
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variables. Ce dernier peut etre encode avec des parametres de qualite affectant direc- 
tement la bande passante necessaire a sa transmission (de 32 a 320 kbps, stereo ou 
mono, debit - bitrate - variable ou constant). 

AAC (Advanced Audio Coding) 

L'AAC est cense fournir une meilleure qualite que le MP3 a debit equivalent, avec la 
possibilite de contenir jusqu'a 48 canaux. II a ete choisi par Apple pour iTunes avec 
une gestion de DRM integree et comporte des profils dont le fonctionnement est 
equivalent a celui de H.264 pour la compression et la lecture. 

C'est un format qui tombe egalement sous la coupe de brevets logiciels. En general, il est 
a l'aise dans un conteneur MP4, supporte par les produits Apple et Adobe Flash. 

Yorbis 

Petit frere Ogg, Vorbis est a l'audio ce que Theora est a la video. II est bien entendu 
libre de droits et dispose d'atouts techniques indeniables qui le placent au-dessus du 
MP3 avec par defaut une compression a debit variable. 

On retrouve Vorbis dans d'autres conteneurs tels que WebM dont il est l'unique 
format audio, et MP4 ou Matroska. 

* wbis com 



Outils d'encodage et de conversion 

Les outils d'encodage et de conversion pour la video et 
l'audio sont legion, lis supportent la plupart du temps de 
multiples formats et conteneurs, a partir de sources 
variees. Certains d'entre eux sont minimalistes et sim- 
ples d'acces, d'autres tres riches et equipes de fonction- 
nalites d'edition avancees. On peut distinguer les logi- 
ciels de montage complet qui disposent de fonctions 
d'export une fois la creation terminee, et les outils de 
simple conversion d'un format a I'autre. 
Handbrake (convertisseur multiplateforme licence GPL) 

► http://handbrake.fr/ 

MiroVideoConverter (convertisseur multiformat licence 
Open Source) 

► http://www.mirovideoconverter.com/ 



Ffmpeg (fameuse librairie de conversion Open Source) 

► http://ffmpeg.org/ 

FFmpeg2Theora (librairie de conversion pour Ogg Theora) 

► http ://v2 v. cc/~ j/ff m peg2 th eo ra/ 
Firefogg (extension Firefox) 

► http://firefogg.org/ 

VLC (lecteur et encodeur multiplateforme Open Source) 

► http://www.videolan.org/vlc/ 

The Lame Project (encodeur MP3 sous licence LGPL) 

► http://lame.sourceforge.net/ 
OggConvert (encodeur OGG sous licence LGPL) 

► http://oggconvert.tristanb.net/ 
Audacity 

► http://audacity.sourceforge.net/ 
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Parmi les outils de conversion (voir encart), MiroVideoConverter reste l'un des plus 
sympathiques a utiliser. Non seulement parce que son interface legere se limite quasi- 
ment au glisser-deposer d'un fichier, mais aussi parce que les prereglages de conver- 
sion par defaut embarquent deja tout ce qu'il faut pour la conversion dans les trois 
formats en lice pour le Web (Ogg Theora, WebM, MP4), mais aussi pour cibler les 
mobiles sous iOS et Android. 




Les balises media 

Concretement, <audio> et <video> en HTML se comportent globalement de la 
meme facon et partagent beaucoup d'attributs. Leur seule difference reside dans leur 
apparence, induite par la nature du contenu : visible pour une video et invisible pour 
de l'audio seul. 

Leur usage est extremement simple, contrairement au choix du format, et ressemble for- 
tement a celui des images. Dans le meilleur des cas, il suffit de preciser un attribut src. 



313 



HTML 5 - Une reference pour le developpement web 



Exemples de codes HTML varies 

<!-- Une "image --> 

<img src="kangourou . jpg" alt="Une photo de kangourou"> 

<!-- Une video --> 

<video src="mes_vacances .webm"x/video> 

<!-- Un son --> 

<audio src="anton_aus_ti rol . mp3"></audio> 

Tout code HTML classique insere entre la balise ouvrante et la balise fermante sera 
affiche pour les navigateurs ne supportant pas ces elements. II est alors possible de 
fournir une alternative texte ou un lien de telechargement direct pour preserver un 
minimum de fonctionnalites. 



Ressource Specification HTML Audio et Video 

Par le W3C 

► http://www.w3.Org/TR/html5/video.html#audio 

► http://www.w3.Org/TR/html5/video.html#video 
Par le WhatWG 

► http://www.whatwg.Org/specs/web-apps/current-work/complete/video.html#audio 

► http://www.whatwg.Org/specs/web-apps/current-work/complete/video.html#video 
Denominations et types des conteneurs/formats video 

► http://wiki.whatwg.org/wiki/Video_type_parameters 



Puisque la specification ne fournit pas de contrainte graphique sur l'interface de con- 
trole, les navigateurs sont libres de lui conferer l'apparence qui leur semble la plus 
appropriee. On retrouve ainsi plusieurs styles differents, mais globalement toujours la 
presence des memes elements : bouton de lecture/pause, barre de progression, duree 
ecoulee/restante, controle du volume. 



Figure 7-8 

Audio sous Google Chrome 



03:00 4» 



Figure 7-9 

Audio sous Internet Explorer 9 



Figure 7-10 

Audio sous Safari 
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Figure 7-1 1 

Audio sous Opera 



Ml* 



Figure 7-12 

Audio sous Firefox 





II est bien sur envisageable d'harmoniser ces apparences en developpant tous les ele- 
ments graphiques depuis zero, en HTML et CSS avec des images, voire avec SVG. 
D'ailleurs, la plupart des navigateurs se servent deja de ces technologies pour creer les 
interfaces ci-dessus. Elles sont tout simplement cachees dans un sous-arbre DOM 
invisible pour le developpeur web. 

Certaines librairies JavaScript proposent des apparences personnalisees en comple- 
ment a l'alternative Flash. L'API Media Elements offre des methodes d'acces aux 
controles du media (lecture, pause) et a ses proprietes (par exemple son etat « en 
lecture », ou sa duree). 



L'integration d'un fichier audio avec la balise <audi o> dans le document HTML est extre- 
mement simple, il sufEt de preciser rattribut s re pour faire reference au fichier concerne. 

Exemple minimaliste <audio> 

<audio src="mamusique.oga"> 

<a href="mamusi que . oga">Te"l echarger le fichier son</a> 
</audio> 

Dans l'exemple ci-dessus, mamusique.oga est situe dans le meme niveau d'arbores- 
cence que le document. Les subtilites autour de cet element vont dependre des attri- 
buts decrits ci-apres. 

Lelement <audio> ne possede pas d'attributs width (largeur), height (hauteur) et 
poster. 



L'integration d'un fichier video avec <video> est aussi simple. Lattribut sre fait tou- 
jours reference au fichier a lire dans la page. 



<audio> 



<vidco> 
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Exemple minimaliste <video> 

<video src="vi deo . ogv" width="640" hei ght="480"> 
<a href="video.ogv">Telecharger la video</a> 
</video> 

Etant donne qu'il s'agit d'un element visuel, il est fortement conseille de lui attribuer 
des dimensions, dans l'exemple ci-dessus grace aux attributs width (largeur) et 
height (hauteur). Idealement - si la disposition de la page et l'espace disponible le 
permettent - il est egalement conseille de conserver la resolution native de la video 
pour assurer une qualite optimale et eviter un redimensionnement ou un echantillon- 
nage potentiellement disgracieux. 



Figure 7-13 

<video> dans Google Chrome 




<sourcc> 

Ces deux nouveaux elements media disposent, outre l'attribut src, d'un moyen alter- 
natif pour indiquer des sources multiples grace a <source>, elements enfants de 
<vi deo et <audi o>. A cela, deux avantages : 

• Pouvoir proposer plusieurs formats de fichiers possedant chacun un attribut type dif- 
ferent, mentionnant le type MIME approprie et eventuellement les codecs utilises (ce 
qui tombe a point nomme etant donne l'heterogeneite des niveaux de support). 

• Pouvoir proposer un format de fichier mieux adapte selon le type de peripherique 
de consultation, avec l'attribut eponyme medi a et une media query (voir l'annexe B 
en ligne sur les feuilles de style CSS), par exemple pour une plate-forme mobile. 
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Le navigateur decide alors d'utiliser la source qui lui semble la plus appropriee en 
fonction de ces criteres. L'attribut src doit alors etre omis sur la balise parent, car il 
obtient la priorite et oblige le navigateur a ignorer les sources alternatives indiquees. 

Sources multiples <video> 

<vi deo> 

<source src="video.mp4" type="video/mp4"> 

<source src="video. 3gp" type="video/3gpp" media="handheld"> 
<source src="video.ogv" type="video/ogg ; codecs=theora, vorbis"> 
<source src="video.webm" type="video/webm; codecs=vp8, vorbis"> 
Ce navigateur ne supporte pas 1 'element <code>video</code> 
</vi deo> 

Dans le cas present, quatre sources sont proposees : 

• une video a destination des mobiles (3GP avec media handheld) ; 

• une video Ogg Theora a destination des navigateurs supportant le type 
MIMEvideo/ogg et equipes des codecs theora (video) et vorbis (audio) ; 

• une video WebM a destination des navigateurs supportant le type MIMEvi deo/ 
webm et equipes des codecs vp8 (video) et vorbis (audio) ; 

• une video MP4 pour les navigateurs connaissant ce format. 

Sources multiples <audio> 

<audio> 

<source src="mamusique.oga" type="audio/ogg"> 
<source src="mamusique.mp3" type="audio/mpeg"> 
<source src="mamusique.aac" type="audio/mp4"> 
Ce navigateur ne supporte pas 1 'element <code>audio</code> 
</audi o> 

De meme pour l'audio, via cet exemple qui propose deux fichiers compresses a l'aide 
de codecs differents. 

Les sources multiples ont l'avantage de permettre de toucher un panel de visiteurs 
plus large, avec l'inconvenient de devoir concevoir et heberger en parallele plusieurs 
types de fichiers differents. 



<track> 



En complement aux fichiers medias pouvant contenir du son et de la video, 1' element 
<track>, egalement enfant de <video> et <audio>, vise a apporter le support de 
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« pistes de texte temporisees », autrement dit dans la plupart des situations de sous- 
titres. La aussi l'attribut src comporte l'adresse vers le fichier a exploiter. C'est un 
plus essentiel pour I'accessibilite, mais tres peu de navigateurs interpretent son con- 
tenu pour l'exposer a 1'affichage ou aux lecteurs d'ecran, meme si Firefox 6 a fait un 
premier pas pour le rendre disponible dans le DOM. 

Sous-titres 

<track ki nd=" captions" src="soustitres .vtt"> 
Le WhatWG recommande l'usage du format WebVTT. 

Ressource Specification format WebVTT 

Par le WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/webvtt.html 



Attributs pour <track> 

Le type de donnees ajoutees est precise avec l'attribut kind qui peut prendre les 
valeurs suivantes : 

Tableau 7-2 Valeurs possibles pour l'attribut kind 



Valeurs 


Signification 


Description 


subti tl es 


Sous-titres 


Transcription ou traduction pertinente des dialogues lorsque le son est dis- 
ponible mais non compris (par exemple lorsque I'utilisateur ne comprend 
pas le langage original). Affichee en surimpression par le navigateur. 


captions 


Legendes 


Transcription ou traduction pertinente des dialogues, effets sonores et musi- 
caux, et autres indices auditifs, pertinents lorsque la piste audio n'est pas 
disponible (desactivee ou parce que I'utilisateur est malentendant). Affichee 
en surimpression par le navigateur et signalee comme appropriee pour les 
deficiences auditives. 


descriptions 


Descriptions 


Descriptions textuelles de la video, destinees a la synthese vocale comme 
piste audio separee lorsque la composante visuelle n'est pas disponible (par 
exemple lorsque I'utilisateur navigue sans ecran). 


chapters 


Chapitres 


Titres de chapitres destines a la navigation dans la ressource, affiches sous 
forme de liste par le navigateur. 


metadata 


Meta-informations 


Donnees a destination du langage de script, non affichees par le navigateur. 



L'attribut srclang precise la langue du sous-titre ou des informations delivrees. 

L'attribut 1 abel permet de donner un titre lisible par I'utilisateur pour le choix de la 
piste texte a afficher. 
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L'attribut default active un element track par defaut si l'utilisateur n'en a pas choisi 
d'autre. 

Exemple complet avec plusieurs elements <track> 

<video src="video.webm"> 

<track kind="subtitles" src="video.fr.vtt" srclang="fr" 
label="Francais" default> 

<track ki nd="captions" src="video.fr.cap.vtt" srclang="fr" 
label="Frangais pour mal entendants"> 

<track kind="subtitles" src="video.en.vtt" srclang="en" 
label="English"> 

<track kind="subtitles" src="video.de.vtt" srclang="de" 
label="Deutsch"> 

<track ki nd="descriptions" src="video.fr.desc.vtt" srclang="fr" 
label="Description texte"> 
</video> 



Attributs pour <audio> et <video> 



src 

Comme indique precedemment, l'attribut src des elements parents <video> ou 
<audio> fait reference a l'adresse du fichier media a telecharger et a interpreter. 

width et height 

Uniquement valables pour la video, wi dth et hei ght donnent des dimensions en lar- 
geur et hauteur a la zone d'affichage. 

controls 

L'attribut controls est booleen. II active (ou desactive) la presence par defaut des 
controles visuels a l'ecran. 

<video src="video.ogv" controls> 

<a href="v"ideo.ogv">Telecharger la video</a> 
</video> 



poster 

L'attribut poster est destine a indiquer une image de substitution a afficher en lieu et 
place de la video avant la lecture. II n'existe pas pour la balise <audio>. Bien que cer- 
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tains formats video tels que le MPEG-4 disposent deja de fonctionnalites pour pre- 
afficher une image du contenu, cet attribut a le merite d'uniformiser cette methode 
pour l'ensemble des types de fichiers. 

<video src="vi deo . ogv" poster="poster . jpg" width="640" hen ght="480"> 

<a href="vi deo . ogv">Tel echarger la video</a> 
</vi deo 

autoplay 

Ainsi que son nom le laisse suggerer dans la langue de Shakespeare, autoplay 
declenche la lecture automatiquement, aussitot que le media est pret. 

<audio src="mamusique.mp3" autoplay="autoplay"> 

<a href="mamusique.mp3">Telecharger le fichier son</a> 
</audio> 

preload 

II peut etre interessant de precharger le fichier media des la consultation du docu- 
ment HTML. Cela incombe a l'attribut preload et permet de reduire l'attente 
lorsque l'utilisateur choisit de lancer la lecture, en anticipant son telechargement. 

<video src="vi deo . ogv" preload="auto" width="640" hei ght="480"> 

<a href="vi deo . ogv">Tel echarger la video</a> 
</video> 

Cependant, il faut veiller a ne pas utiliser excessivement cet attribut vorace en bande 
passante qui peut vite avoir des effets nefastes sur les performances avec une page 
comportant de multiples balises <video> ou lors d'une consultation en situation de 
mobilite (puissance limitee et bande passante reduite). 

Les valeurs possibles sont : 

• auto : charge la totalite du media ; 

• meta : charge uniquement les meta-informations ; 

• none : ne precharge rien. 

Cet attribut est ignore si autoplay est present, car il n'a alors plus aucune utilite. Si 
l'attribut poster est absent, la plupart des navigateurs prechargeront le debut de la 
video pour pouvoir afficher un apercu, ce qui peut s'averer egalement consommateur 
en bande passante. 
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loop 



Si l'attribut 1 oop est present, le media sera lu indefiniment en boucle. 



<audio src="mamusique.mp3" loop="loop"> 

<a href="mamusique.mp3">Telecharger le fichier son</a> 
</audio> 



Interface de contrdle et evenements 

L'interet majeur de <video> et <audio> reside dans leur capacite a etre controles via 
le DOM et JavaScript. lis implementent tous les deux l'interface HTML Media Ele- 
ment qui leur confere la gestion des evenements, des proprietes accessibles en modifi- 
cation ou en lecture seule (readonly). 



Tableau 7-3 Interface HTML Media Element (vue simplifies) 



Propriete ou methode 


Type 


Description 


src 


DOMString 


Adresse du media (valeur de l'attribut s rc). 


currentSrc 


DOMString 
(readonly) 


Adresse courante de la ressource selectionnee, notamment lorsqu'il 
y a plusieurs sources. 


currentTime 


double 


Position courante de la lecture (en secondes). 


"initial Time 


double (readonly) 


Position initiale (en secondes). 


duration 


double (readonly) 


Duree totale (en secondes). 


total Bytes 






def aul tPl aybackRate 


double 


Vitesse de lecture par defaut. 


pi aybackRate 


double 


Vitesse de lecture courante (1 . etant la vitesse normale). 


played 


TimeRanges 


Intervalles de la ressource ayant ete joues. 


seekable 


TimeRanges 


Intervalles de la ressource dans lesquels il est possible de naviguer. 


seeki ng 


boolean (readonly) 


Retourne t rue si le navigateur est en train de naviguer dans la res- 
source. 


paused 


boolean 


Retourne true si la lecture est en pause. 


ended 


boolean (readonly) 


Retourne true si la lecture a atteint la fin de la ressource. 


buffered 


TimeRanges (rea- 
donly) 


Intervalles de la ressource mis en cache. 


error 


MediaError 


Evenement erreur s'il y a lieu. 
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Tableau 7-3 Interface HTML Media Element (vue simplifiee) (suite) 



Propriete ou methode 


Type 


Description 


error . code 


unsigned short 
(readonly) 


Gestion des erreurs (voir ci-apres), avec les valeurs : 
MEDIA_ERR_ABORTED (1) La recuperation de la ressource a ete 
annulee par le navigateur a la demande de I'utilisateur. 
MEDIA_ERR_NETWORK (2) Erreur du reseau provoquant I'indis- 
ponibilite de la ressource. 

MEDIA_ERR_DECODE (3) Erreur de decodage de la ressource. 
MEDIA_ERR_SRC_NOT_SUPPORTED (4) La ressource indiquee 
par I'attribut s rc n'est pas supportee. 


networkState 


unsigned short 
(readonly) 


Activite du reseau, avec les valeurs : 
NETWORK_EMPTY (0) Non initialise. 

NETWORK_IDLE (1) Une ressource a ete choisie mais le reseau 
n'est pas encore utilise. 

NETWORK_LOADING (2) Le navigateur telecharge les donnees. 
NETWORK_NO_SOURCE (3) L'algorithme de selection n'a pas 
trouve de ressource a utiliser. 


readyState 




Etat courant de I'element concernant la lecture, possedant les 
valeurs : 

HAVE_NOTHING (0) Aucune information. 
HAVE_METADATA (1) Meta-informations disponibles (notamment 
dimensions de la video et pistes de texte pretes). 
HAVE_CURRENT_DATA (2) Donnees immediates disponibles 
(notamment position) mais pas assez pour progresser dans le sens 
de la lecture. 

HAVE_FUTURE_DATA (3) Donnees immediates et futures disponi- 
bles pour avancer dans le sens de la lecture. 
HAVE_ENOUGH_DATA (4) Assez de donnees immediates et futu- 
res recues avec un rythme de reception moyen suffisant pour proce- 
der a la lecture sans revenir dans un etat intermediaire. 


vol ume 


double 


Volume audio (minimum : 0, maximum : 1.0). 


muted 


boolean 


Mode silencieux active (true). 


controls 


boolean 


Valeur de I'attribut controls. 


autoplay 


boolean 


Valeur de I'attribut autopl ay . 


preload 


DOMString 


Valeur de I'attribut p rel oad . 


loop 


boolean 


Valeur de I'attribut 1 oop . 


playO 


void 


Lance la lecture. 


pauseC) 


void 


Met en pause la lecture. 


load() 


void 


Reinitialise I'element et l'algorithme de selection de ressource 
depuis zero. 


canPlayType() 


DOMString 


Detection des capacit.es de lecture (voir ci-apres). 
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Controler la lecture 

Les deux methodes playO et pause() sont evidentes. II n'existe pas de methode 
stopO , mais il suffit d'appeler pause() et de modifier la propriete currentTime a 
une valeur nulle pour revenir au debut. 

Exemple de controle de la video en JavaScript 

<video src="video.ogv" id="mavideo"> 

<a href="video.ogv">Telecharger la video</a> 

</vi deo> 

<scri pt> 

var vidl = document . getEl ementById("mavideo") ; 

</scri pt> 
<P> 

<button type="button" oncl i ck="vidl .pi ay() ; ">P1 ay</button> 

<button type=" button" oncl i ck=" vidl .pause () ; ">Pause</button> 

<button type=" button" oncl i ck=" vidl .pause () ; vidl .cur rentTime=0; ">Stop 

</button> 

</p> 

Dans cet exemple et pour des raisons de simplicite, les appels a l'API de la video sont 
effectues directement dans les attributs HTML. Dans un monde ideal, sans guerres 
et sans skyblogs, il serait preferable de les placer dans des blocs <scn'pt> indepen- 
dants du contenu pour plus de lisibilite. L'essentiel reste de recuperer l'objet relatif a 
la balise <vi deo>, puis d'appliquer les methodes de controle dont il est equipe. 

Le premier interet de ces methodes est de concevoir une interface graphique de con- 
trole personnalisee pour remplacer celle proposee par defaut, a l'aide d'images, de 
liens, ou d'autres elements styles avec CSS. 

Surveiller les evenements 

Un lecteur multimedia est susceptible de se trouver dans une grande variete d'etats. 
Ses proprietes (readyState, networkState, paused, seeking...) renseignent sur ces 
etats, mais l'ideal est de savoir a quel moment exact ceux-ci changent, plutot que de 
les interroger chacun regulierement. 

Les balises <audio> et <video> sont supposees declencher des evenements lorsqu'un 
changement d'etat intervient. Par exemple au debut de la lecture (onplay), a la pause 
(onpause), a la progression du telechargement (onprogress), a la fin de la lecture 
(onended), ou meme quand le volume est change (onvolumechange). 

Neanmoins, un avertissement ne devrait plus vous etonner : tous les navigateurs ne 
declenchent pas ces evenements de facon egale. II est tout a fait possible qu'ils soient 
ignores, tandis que la balise media ou que le controle soit tout de meme possible avec 
JavaScript. II existe meme des evenements presents dans l'un ou 1' autre moteur, voire 
dans un moteur, mais pas dans la specification et inversement. 
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La gestion parfaite des evenements DOM est un long sujet, ce chapitre va se limiter 
a trois exemples minimalistes. 

Gestion de quelques evenements de lecture (version avec proprietes) 

<video src="mavideo.webm" i d="mavi deo" control sx/vi deo> 
<scri pt> 

var vidl = document. getElementById("mavideo") ; 
vidl.onended = functionO { 
alert('Fin de la lecture.'); 

}; 

vidl.onpause = functionO { 
al ert( ' Pause ...'); 

}; 

vidl.onplay = functionO { 
alertC Lecture ! ') ; 

}; 

</scri pt> 

Avec cette premiere methode, Ton associe des fonctions JavaScript aux evenements princi- 
paux pour afficher une alerte texte. Note : elle ne fonctionne pas sur Google Chrome 13. 

Gestion de quelques evenements de lecture (version avec attributs) 

<video src="mavideo.webm" id="mavideo" controls onplay="alert('On y va 
! ') ;" onended="fin(this) ;"></video> 

<scri pt> 

function fin(obj) { 

obj . styl e . di spl ay="none" ; 

} 

</scri pt> 

Cette deuxieme methode exploite des attributs portant le nom des evenements. Sur 
l'evenement lecture (onplay), la fonction d'alerte est directement indiquee dans la 
valeur de l'attribut. Ce n'est pas tres propre et il faut eviter cette syntaxe lorsque les 
pages sont deja bien complexes. Sur l'evenement de fin de lecture (onended), la fonc- 
tion JavaScript a appeler est precisee avec en argument le mot-cle this, faisant refe- 
rence a l'objet appelant (la video). Dans la fonction f i n() deportee a l'interieur de la 
balise <script>, le parametre obj prend done la valeur de this, ce qui permet de 
masquer la video a la fin de la lecture - cela bien sur a des fins de demonstration, ne 
deroutez pas vos visiteurs avec cet artifice. 

Reportez-vous au tableau des attributs evenements HTML pour prendre connais- 
sance des attributs applicables sur les elements « Medias ». 
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Gestion de quelques evenements de lecture (version avec addEventlistener) 

<video src="mavideo.webm" i d="mavi deo" control sx/vi deo> 
<scn'pt> 

var vidl = document. getElementById('mavi deo') ; 
vidl.addEventListenerC'play" , functionO { 

alert("C'est parti ! ") ; 
},true) ; 

vidl.addEventListener("ended" , functionO { 

alert("C'est deja la fin..."); 
},true) ; 

vidl.addEventListener("pause" , functionO { 

alert("En pause. ") ; 
},true) ; 
</scri pt> 

Cette troisieme possibilite fait appel a la methode standardised addEventLi stenerO 
qui associe un evenement a une fonction, dans les regies de Fart. Elle a le merite de 
separer le contenu de la gestion des evenements, mais n'existe pas pour les versions 
anterieures a Internet Explorer 9 qui font appel a attachEventO. 

Reportez-vous a la section consacree a la gestion des evenements DOM au chapitre 20 pour plus de pre- 
cisions. 



Creer une interface graphique personnalisee 

Avoir la faculte de controler la lecture et d'espionner les evenements suffit pour 
mettre en place une apparence graphique sur mesure, en remplacement de celle pro- 
posee par defaut par le navigateur. Cette approche suppose cependant de rester tres 
prudent quant a l'accessibilite des controles. Ceux-ci doivent rester facilement utili- 
sables et compris par les syntheses vocales. II faut done bien souvent reproduire le 
travail deja mene par les developpeurs du navigateur qui ont pris toutes les disposi- 
tions necessaires pour gerer la navigation au clavier, la comprehension des com- 
mandes par une synthese vocale, et le pilotage complet des evenements. 

En JavaScript, il est possible de creer dynamiquement un objet audio grace a l'API 
HTML 5 puis de le controler a l'aide des methodes exposees precedemment. 

var audio = new Audi o("fi chi er . mp3") ; 
audi o . pi ay() ; 

Neanmoins, ce precede n'insere (par defaut) pas ce contenu dans le DOM et necessite 
quelques pirouettes pour specifier plusieurs sources ou le rendre accessible. Nous allons 
nous concentrer sur une balise <audi o> classique a laquelle sera offert un lifting. 
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Code source du lecteur audio 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Audio</title> 
<meta charset="utf-8"> 

<link rel="stylesheet" href="audi o-pl ayer . ess" type="text/css"> 

</head> 

<body> 

<audio id="monaudio" controls> 

<source src="space . mp3" type="audi o/mp3"> 

<source src="space . ogg" type="audi o/ogg"> 

<source src="space .wav" type="audi o/wav"> 
</audio> 

<div id="player"> 

<input type="button" val ue="Lecture" cl ass="pl ay"> 

<input type="button" val ue="Pause" cl ass="pause"> 

<span class="info">0:00</span> 

<span cl ass="track"xspan></spanx/span> 

<input type="button" val ue="Vol ume" cl ass="audi bl e"> 

<input type="button" value="Muet" cl ass="muted"> 

</d"i v> 

<scri pt> 

var audio = document. getElementById("monaudio") ; 
audi o . removeAttri bute(" control s") ; Q 
audi o . styl e . di spl ay= ' none ' ; // Pour Chrome 

var player = document. getElementById("player") ; Q 
player. style. display='block' ; 

var info = pi ayer . getEl ementsByCl assName("i nfo") [0] ; 
var track = player. getElementsByClassName("track") [0] ; 
var seeker = track. chi 1 dNodes [0] ; 

player. getElementsByClassName("play") [0] .onclick = functionO { 
audio. pi ay () ; 

}; O 

player. getElementsByClassName("pause") [0] .onclick = functionO { 
audio. pause() ; 

}; O 

player. getElementsByClassName("audible") [0] .onclick = functionO { 
audio. volume = 0; 
thi s . styl e . di spl ay= ' none ' ; 

pi ayer . getEl ementsByCl assName( "muted") [0] . styl e . di spl ay=' bl ock ' ; 

}; O 
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pi ayer . getEl ementsByCl assName("muted") [0] . one! i ck = functionO { 
audi o . vol ume = 1; 
thi s . styl e . di spl ay= ' none ' ; 

pi ayer . getEl ementsByCl assName ("audi bl e") [0] . styl e . di spl ay= ' bl ock ' ; 
}; O 

audi o . addEventLi stenerf ' ti meupdate ' , function(){ 

var total = audio. duration; 

var position = audio. currentTime; 

var progression = (positi on/total )-'100; 

var min = parselnt(position/60) ; 

var sec = parselnt(position-(min*60)) ; 

seeker . styl e .width=parseFl oat (prog ressi on)+ '%' ; 

if(sec<10) sec = 'O'+sec; 

i nfo . i nnerHTML = min+':'+sec; 
}, false); © 

audi o . addEventLi stener( ' ended ' , functionO { 

i nfo. i nnerHTML = '0:00' ; 

seeker . styl e . wi dth=0 ; 
}, false); 

track. addEventLi stenerf ' cl i ck ' , function(event) { 
var pos = event . of fsetX/event . target . cl i entWi dth ; 
audio. currentTime = pos-100/audio. duration; 

}); O 

</scri pt> 

</body> 
</html> 

Dans la phase d'initialisation, les controles par defaut son masques en retirant l'attribut 
controls pour remplacer totalement l'interface <audio>. Un visiteur ayant desactive 
JavaScript ne sera pas penalise, les controles resteront bien en place. L'interface person- 
nalisee est contenue dans un <di v> et constituee de plusieurs <i nput type="button"> 
pour les controles et de <span> pour l'indicateur de progression. Q 

Dans un deuxieme temps, la zone contenant les elements de remplacement est affi- 
chee, et quelques variables sont utilisees pour stocker les references aux objets 
HTML manipules. 

Dans un troisieme temps, des actions sont associees aux boutons de lecture, pause et 
de controle du volume. Celui-ci se limite dans le cadre de cette demonstration a 
passer de a 1, e'est-a-dire d'un silence total a un volume complet. 

Vient ensuite la gestion de la progression lors de la lecture. Pour chaque evenement 
ti meupdate genere par le navigateur, quelques calculs sont effectues pour determiner 
la position courante par rapport a la duree totale. Les valeurs sont ensuite affichees 
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dans la zone d'information en minutes: secondes, et le pourcentage affecte a la largeur 
de la barre de progression. O 

Lorsque l'evenement ended se produit, la largeur de cette barre est ramenee a et la 
duree affichee a « 0:00 ». 

Enfin, au clic sur la zone de progression, quelques operations en JavaScript calculent la 
position du clic par rapport a la largeur de cette zone et affectent cette valeur a 
currentTime, apres l'avoir traduite en secondes, pour se deplacer dans la piste audio. 

L'ensemble de la presentation est confie a la feuille de style CSS et des images specifi- 
ques. 

Figure 7-14 

Plusieurs images play.png pause.png muted. png audible. png info.png 

composeront I'interface 

O □ D B3 I 

play-hover.png pause-hover. png muted-hover. png audible-hover. png track. png 



Feuille de style associee 

#player { 
width: 140; 
height: 30px; 

} 

#player .play, #player .pause, #player .vol, #player .audible, #player 
.muted { 
border : ; 

color: transparent; 
float: left; 

} 



#player .play { 
width:29px; 
hei ght : 30px ; 

background : url (play.png) no-repeat; 

} 

#player .pi ay: hover { 

backg round- i mage : url (pi ay- hove r . png) ; 
cursor: pointer; 

} 



#player .pause { 
wi dth : 28px ; 
height: 30px; 
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background : url (pause. png) no-repeat; 

} 

#player .pause: hover { 

background-image:url (pause-hover . png) ; 
cursor : poi nter ; 

} 

#player .info, #player .track { 
width: 50px; 
height: 30px; 

background : url (i nfo . png) repeat-x ; 

di spl ay : i nl i ne-bl ock ; 

f 1 oat : 1 eft ; 

color:white; 

1 i ne-hei ght : 30px ; 

f ont-wei ght : bol d ; 

font-family : sans-serif; 

text-al i gn : center ; 

font-si ze : 15px ; 

} 

#player .track { 
width :100px; 

background-repeat: repeat-x; 

} 

#player .track span { 

background : url (track .png) repeat-x ; 
width :0; 
display:block; 
height: 100%; 

} 

#player .audible { 
wi dth : 34px ; 
height: 30px; 

background : url (audi bl e . png) no-repeat ; 

} 

#player . audi bl e : hover { 

background-image:url (audi bl e-hover . png) ; 
cursor : poi nter ; 

} 

#player .muted { 
wi dth : 34px; 
height: 30px; 

background : url (muted. png) no-repeat; 
di spl ay : none ; 
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} 

#player . muted : hover { 

backg round- i mage : url (mu ted- hove r . png) ; 
cursor: pointer; 

} 

Figure 7-15 ^VTHIRIflH ^RfS 

Lecteur en etat arrete 



II s'agit de conferer les arriere-plans appropries aux boutons ainsi que les effets de 
survol. La representation graphique de la progression depend d'un element <span> 
dont la largeur varie de a 100 % dans son conteneur. 

Figure 7-16 ^VTHIRISfl 

Lecteur en lecture ^^^j^^^^^^^^^^yp 

avec survol du bouton 

Faisons quelques remarques. 

• II est tout a fait envisageable de mettre a profit une librairie telle que jQuery pour 
simplifier l'ecriture du code JavaScript et pour y apporter des ameliorations visuelles. 

• L'API Selectors serait aussi un bon choix pour simplifier l'ecriture des selecteurs 
DOM. J'ai volontairement utilise des classes pour designer les elements plutot 
que des i d, afin de pouvoir placer plusieurs lecteurs sur une meme page HTML. 

• Un controle du volume pourrait etre implemente grace a <i nput type=" range">. 

• II existe de multiples facons de baliser un tel lecteur. Celle-ci fait le choix de la 
simplicite. Lensemble est transposable a la video. 

• Dans un monde parfait, ARIA doit etre applique pour prendre en compte I'acces- 
sibilite. Reportez-vous a l'annexe en ligne correspondante et experimentez ! Les 
attributs aria-live, aria-valuenow, aria-orientation, aria-controls, aria- 
1 abel et bien d'autres sont la pour etre utilises. 

• Afin d'apporter un support sur les anciens navigateurs, un lecteur Flash pilotable 
par JavaScript serait adequat pour lire la piste MP3. 

• J'ai cede a la facilite d'utiliser des noms d'elements, de classes et de fichiers en 
anglais, mea culpa. 

Detecter les erreurs de lecture 

Levenement error peut s'averer diablement utile pour detecter les erreurs survenant 
avant et pendant la lecture. II genere un objet evenement dont le membre target fait 
reference a l'element HTML ayant suscite une erreur. Ce membre est lui-meme 
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complete par une propriete error. code qui contient une valeur numerique corres- 
pondent a des constantes predefinies. 

Detection des erreurs du media 

<video src="video.erreur" id="mavideo" width="450" height="256" 
autopl ayx/vi deo> 

<scri pt> 

document. getElementById("mavideo") .onerror = function(event) { 
swi tch (event . target .error . code) { 

case event . target . er ror . MEDIA ERR ABORTED : 

alert('La lecture du media a ete annulee.'); 
break; 

case event . target . er ror . MEDIA ERR NETWORK : 
alert('Une erreur ou une "i ndi sponi bi 1 i te reseau n\'a pas permis le 
bon deroulement du tel echargement . ' ) ; 
break; 

case event . target . er ror . MEDIA ERR DECODE : 

alert('La lecture a ete annulee suite a une erreur de corruption 
du fichier, ou parce que le media utilise des fonctionnal ites que ce 
navigateur ne peut supporter.'); 

break; 

case event . target . error .MEDIA ERR SRC NOT SUPPORTED: 

alert('Le fichier ne peut etre charge, soit parce que le serveur 
distant ou le reseau sont i ndi sponi bl es , soit parce que le format n\'est 
pas supporte . ' ) ; 
break; 
default: 

alert( ' Erreur inconnue.'); 
break; 

} 

}; 

</scri pt> 

Ici, l'erreur MEDIA_ERR_SRC_NOT_SUPPORTED est volontairement declenchee en indi- 
quant l'adresse d'un fichier inexistant. Le meme principe est applicable pour 
readyState et networkState, sur le declenchement d'un evenement particulier, ou 
bien grace a une surveillance en continu. 

Detection du support avec canPlayType() 

Les niveaux de support par les navigateurs sont multiples. Dans le cas des anciens 
navigateurs qui n'ont aucune affinite avec HTML 5, la decision est plus simple : seul 
le contenu alternatif sera affiche. Si les recents reconnaissent bien les nouvelles 
balises <audio> et <video>, rien ne garantit qu'ils puissent decoder le format de 
fichier ou meme avoir la puissance de l'analyser si le debit du flux est trop eleve. 
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La premiere possibilite de detection consiste a surveiller si un evenement error est 
declenche, et eventuellement a prendre en compte le type d'erreur (voir la section 
precedente). 

La deuxieme possibilite consiste a anticiper avec un appel a la methode 
canPl ayType(). Cette fonction accepte en argument un type MIME, eventuelle- 
ment precise par des codecs, et retourne au choix : 

• une chaine vide : le conteneur video ou son format de compression nest pas supporte ; 

• maybe : le conteneur est peut-etre supporte, mais on ne s'avance pas sur les codecs ; 

• probabl y : le conteneur et les codecs sont probablement supportes. 

Comme on peut le constater, il s'agit de reponses un peu indecises. Le navigateur ne 
prend aucun engagement. Ceux qui me frequentent au travail savent que je reponds 
frequemment « 9a depend » a bon nombre de questions et que je peux comprendre 
une telle precaution. Les eventualites sont si nombreuses qu'il n'est pas possible 
d'envisager un retour tel que « Yes we can ». 

Tableau 7-4 Quelques reponses pour la video 



Navigateur 


video/webm 


video/ogg 


video/ogg; 
codecs= 
"theora, 
vorbis" 


video/mp4 


video/mp4; 
codecs= 
"avc1.42E01E, 
mp4a.40.2" 


Mozilla Firefox 6 


probably 


maybe 


probably 






Opera 11.5 


maybe 


maybe 


probably 






Internet Explorer 9 








maybe 


probably 


Google Chrome 13 


maybe 


maybe 


probably 


maybe* 


probably* 



Comme on peut le constater, en precisant les codecs utilises les reponses sont un peu 
moins frileuses et osent un « probably ». 



Tableau 7-5 Quelques reponses pour I'audio 



Navigateur 


audio/mp3 


audio/mp4 


audio/wav 


audio/ogg 


Mozilla Firefox 6 






maybe 


maybe 




Opera 11.5 






maybe 


maybe 




Internet Explorer 9 


maybe 


maybe 








Google Chrome 13 


maybe 


maybe 


maybe 


maybe 





Prise en charge par les navigateurs 

Pour des valeurs mises a jour, reportez-vous au site d'accompagnement de I'ouvrage. 
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Solution de repli avec Flash et Java 

Cette detection permet d'ecrire une solution de repli (fallback) pour un navigateur 
qui serait particulierement recalcitrant a toutes ces nouveautes, et de prevoir des 
alternatives : 

• en Flash avec JWPlayer, car le plug-in decode nativement MPEG-4/H.264/AAC ; 

• en Java avec l'applet Cortado qui decode Ogg Theora. 

Avec la demonstration suivante, le lecteur video est volontairement restreint au 
format MP4. 

Alternative pour <video> en Flash avec lecture MP4 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Video Fallback en Flash</title> 

<meta charset="utf-8"> 

</head> 

<body> 

<hl>Vi deo</hl> 

<video id="mavideo" width="720" height="406" poster="bunny. jpg" 
controls preload="none"> 

<source src="bunny .mp4" type="video/mp4"> 

<object data="jwplayer .swf" width="720" height="406"xparam 
name="flashvars" value="file=bunny.mp4"x/object> Q 
</video> 

<scri pt> 

// Cette fonction supprime tous les nodes <source> 
// et le parent <video> lui-meme pour ne conserver 
// que le contenu alternatif 
function fall back(el ement_vi deo) { Q 

video = document . getEl ementById(el ement_vi deo) ; 
whi 1 e(vi deo . fi rstChi 1 d) { 

i f (vi deo . f i rstChi 1 d instanceof HTMLSourceElement) { 

vi deo . removeChi 1 d (vi deo . f i rstChi 1 d) ; 
} else { 

video. parentNode . i nsertBefore(vi deo.fi rstChild, video) ; 

} 

} 

vi deo . parentNode . removeChi Id (video) ; 

} 

var elvideo = document . createEl ement( ' vi deo ') ; 
if (! lelvideo.canPlayType) { © 
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// alert('HTML5 Video semble accepte'); 
i f ( ! el vi deo . canPlayTypeC ' video/mp4 ' )) { Q 

// alert('Pas de support natif video/mp4 : repli Flash'); 

fal 1 back ('mavi deo') ; 

} 

} else { 

fal 1 back( ' mavi deo ' ) ; 

} 

</scri pt> 

</body> 
</html> 

La balise <video> contient un contenu alternatif, une balise <object> Q qui fait 
reference a un fichier Flash : le lecteur de video JWPiayer. Si le navigateur ne recon- 
nait pas la video en HTML 5 © ou signifie qu'il n'est surement pas capable de 
decoder un type MIME video/mp4 ©, alors il est fait appel a la fonction 
fallback() Q qui retire dynamiquement les elements HTML superfius (<video> et 
<source>) pour ne laisser que le lecteur en Flash <object> Q. Ce dernier peut tout 
de meme exploiter le meme fichier MP4 que la <source> originale, il n'est juste pas 
fait appel directement au decodage natif du navigateur, car celui-ci est absent. 

De la meme facon, un objet peut etre cree pour instancier une applet Java avec Cor- 
tado et lire un fichier Ogg Theora. 

<object type="appl i cati on/x- java-appl et" width="720" hei ght="406"> 
<param name=" archive" val ue="http : //theora . org/cortado . jar"> 
<param name="code" val ue="com. f 1 uendo . pi ayer . Cortado. cl ass"> 
<param name="url" val ue="bunny . ogv"> 
<p>Java est requis.</p> 

</object> 



Ressource Alternatives a <video> 

JWPiayer 

► http://www.longtailvideo.com/players/jw-flv-player/ 
Cortado (fallback Java pour Ogg Theora) 

► http://www.theora.org/cortado/ 



Plein ecran 

Laffichage en plein ecran fait l'objet de quelques debats. D'aucuns se mefient des 
sites malicieux qui tenteraient d'afficher une video en plein ecran pour induire l'utili- 
sateur en erreur et lui demander un mot de passe en lieu et place d'un autre site web 
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ou logiciel. Des methodes experimentales sont prevues du cote de Gecko avec 
requestFullScreenO et du cote de WebKit avec webkitEnterFunScreenO. Une 
methode plus conventionnelle consisterait a laisser le choix a l'utilisateur d'activer 
lui-meme le plein ecran en connaissance de cause lorsqu'il clique sur la zone video. 



Figure 7-17 

Menu contextuel video 
de Firefox 



~ - |j 

VjyjJLGJI*J 



HTML5: Video 



M 



'MS 




Afficher la video 
Copier I'URL de Is video 

Fnrernsttr 'a v'deci srait.. 



Aller plus loin avec les API 

Mozilla a introduit l'Audio Data API qui accede directement au contenu de la res- 
source audio et permet meme de la creer. Cette interface de programmation permet 
de lire et d'ecrire des donnees brutes en JavaScript, c'est-a-dire de : 

• creer des flux a la volee ; 

• traiter et modifier un flux existant ; 

• creer des visualisations de spectres audio ; 

• et bien d'autres applications concretes qui restent a imaginer. 

Ces notions font appel a des connaissances en manipulations de donnees binaires et 
en transformee rapide de Fourier. L'API est egalement disponible depuis 
Chrome 14. Pour plus de renseignements, consultez la documentation en ligne. 



Ressource Specification Audio Data API 

Wiki de Mozilla 

v https://wiki.mozilla.org/Audio_Data_API 
Tutoriel d'introduction (en anglais) 

v https://developer.mozilla.org/en/lntroducing_the_Audio_API_Extension 
Tutoriels pour la creation de visualisations 

► https://developer.mozilla.org/en/Visualizing_Audio_Spectrum 

► https://developer.mozilla.org/en/Displaying_the_Mozilla_logo_with_the_Audio_Samples 
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Prise en charge de <audio> et <video> 
par les navigateurs : comment choisir ? 

Tableau 7-6 Prise en charge des elements <audio> et <video> par les navigateurs 



Navigateur Version 


Navigateur Version 


Mozilla Firefox 3.5+ 




Android 


2.3+ 


Internet Explorer 


9.0+ 




iOS (iPhone, iPad, iPod) 


1.0+ 


Apple Safari 


4.0+ 




Opera Mobile 


11 + 


Google Chrome 


3.0+ 




Opera Mini 




Opera 


10.5+ 









De nombreuses solutions existent egalement pour profiter de HTML 5 et fournir 
une alternative en Flash aux navigateurs ne le supportant pas encore. Pour cela, trois 
possibilites : 

• detecter le support en JavaScript et modifier dynamiquement le contenu HTML de 
la page pour y placer la balise <ob j ect> ; 

• detecter le navigateur et sa version avec Yuser agent miffing (cote serveur) et servir un 
contenu different avec uniquement <object> ; 

• imbriquer <object> dans 1' element <video> et ainsi permettre aux navigateurs l'igno- 
rant d interpreter le lecteur en Flash pointant vers un fichier FLV7F4VZMP4 adapte a ce 
plug-in. Les navigateurs comprenant <vi deo> ignoreront <ob j ect>, et inversement. 

Dans le contexte de transition et l'attente d'un consensus general sur les codecs, la 
solution permettant de fournir un contenu video decent au public le plus large pos- 
sible consiste a combiner : 

1 WebM (VP8/Vorbis) en premier choix. 

2 Ogg (Theora/Vorbis) pour les anciennes versions de Firefox, Chrome et Opera. 

3 MP4 (H.264/AAC) pour toutes les declinaisons de Safari et autres plates-formes. 

4 Une alternative aux precedents avec un lecteur Flash pour les navigateurs ne 
reconnaissant pas HTML 5, avec eventuellement une lecture du fichier MP4 
(H.264/AAC) depuis la version 9.0.60.184. 

5 Un lien de telechargement direct. 

Avec 1'iPad, il est recommande de placer une version MP4 dans le premier element 
<source> , car dans certaines situations, il est le seul lu et pris en compte (parmi tous 
les autres) par cette tablette. 

Afin de servir les bons types MIME pour les fichiers video, il est parfois necessaire 
de modifier la configuration du serveur web. Ces formats etant recents, ce serveur 
HTTP est susceptible de les envoyer precedes de I'en-tete text/pi ai n, ce qui nest 
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pas tolere par tous les navigateurs. La lecture ne se declenchera probablement pas, 
notamment avec Opera. 

Fichier .htaccess pour Apache et quelques types MIME video 

AddType video/ogg ogg ogv 

AddType video/mp4 mp4 
AddType video/webm webm 

Un tel fichier place a la racine du repertoire stockant les videos devrait amplement suffire. 
Tableau 7-7 Tableau de support (simplifie) des formats audio 



Navigateur 


Ogg Vorbis 


MP3 


AAC 


WAV 


Mozilla Firefox 


Oui 




Oui 


Oui 


Internet Explorer 




Oui 






Apple Safari 




Oui 


Oui 


Oui 


Google Chrome 


Oui 


Oui 


Oui 


Oui 


Opera Windows 


Oui 






Oui 



Tableau 7-8 Tableau de support (simplifie) des formats video 



Navigateur 


Ogg/Theora/Vorbis 


WebM 


MP4/H.264/AAC 


Mozilla Firefox 


3.5+ 


4.0+ 




Internet Explorer 


avec installation manuelle 
ou Google Chrome Frame 


9.0+ avec plug-in WebM de 
Google ou codec VP8 


9.0+ 


Apple Safari 


avec installation manuelle 
(XiphQT) 


avec plug-in WebM de Goo- 
gle 


3.1 + 


Google Chrome 


3.0+ 


6.0+ 


abandonne au profit de 
WebM 


Opera Windows 


10.5+ 


10.6+ 




Opera Linux/FreeBSD 


selon GStreamer 


10.5+ 




Opera Mobile 


11 + 


11 + 




Konqueror 


4.4+ 


selon Xine et Gstreamer, 
bientot VLC et MPIayer 




Epiphany 


2.28+ 


bientot 




Android 




bientot 


2.0+ 


iOS (iPhone, iPad, iPod) 






3.0+ 



Prise en charge par les navigateurs 

Pensez a vous reporter au site d'accompagnement pour des informations a jour sur la prise en charge par 
les navigateurs. 
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Librairies et lecteurs 

De nombreuses librairies JavaScript voient le jour pour faciliter la mise en place des 
medias audio et video en HTML 5, la detection des possibilites du navigateur, la ges- 
tion des chargements et des alternatives (avec Flash), la personnalisation des interfaces 
de controle, la prise en compte des mobiles. Elles sont la solution la plus rapide et la plus 
efficace pour mettre en place rapidement des medias HTML 5 en ligne. 



RESSOURCE Librairies audio et video JavaScript/HTML 5 


Popcorn.js (Mozilla) 


MediaElement.js 


► http://popcornjs.org/ 


► http://mediaelementjs.com/ 


Cuepoint (ajout de sous-titres) 


html5media 


► http://cuepoint.org/ 


► http://html5media.info/ 


VideoJS 


Projekktor 


► http://videojs.com/ 


► http://www.projekktor.com/ 


SublimeVideo 


Audio : Buzz! 


► http://sublimevideo.net/ 


► http://buzz.jaysalvat.com/ 


LeanBack Player 


Comparatif general 


► http://dev.mennerich.name/showroom/ 


► http://praegnanz.de/html5video/ 


htm!5_video/ 





D'autres services, tels que vid.ly, proposent une solution tout-en-un pour convertir 
des fichiers video et les servir a de multiples plates-formes selon leurs capacites, avec 
une seule adresse. Dailymotion et YouTube participent activement au developpe- 
ment de la video HTML 5 sur leurs sites respectifs de partage, mais esperent encore 
d'autres avancees notamment pour le streaming, la prise en charge du plein ecran, et 
l'universalite des formats. 



RESSOURCE Hebergement de videos 

Vid.ly (encodage en ligne) 

► http://vid.ly/ 
Dailymotion HTML 5 

► http://www.dailymotion.com/html5 
YouTube HTML 5 

► http://www.youtube.com/html5 
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Deux nouvelles dimensions s'offrent a nous grace au nouvel element Canvas. 
Jonglez avec les courbes et traces, traitez et transformez images et pixels, 
utilisez les couleurs, motifs, degrades et ombrages. Tout est permis, jusqu'a la 
conception d'animations interactives et de jeux. 



Figure 8-1 Matiere premiere pour canvas 



HTML 5 - Une reference pour le developpement web 

Une des figures de proue de HTML 5 est F element <canvas>. Cette API de dessin 
2D pour le Web est une alternative serieuse et puissante a Flash ou Java pour conce- 
voir en ligne et dynamiquement des images fixes ou animees, a l'aide de formes ou 
via des traces pixel par pixel. 

La zone active releve d'un element dont les dimensions sont definies dans le code de 
la page. Un ensemble de fonctions JavaScript permettent un acces a la zone de 
dessin, en modification ou en lecture. 

Parmi les possibilites offertes figurent : 

• des methodes de trace de formes geometriques (cercles, rectangles...) ; 

• des methodes de trace de polygones ; 

• des methodes de choix de styles de couleurs et de remplissages ; 

• des methodes de trace de texte ; 

• des methodes d'import et de manipulation d'images ; 

• des methodes de transformation (echelle, rotation, deplacement) qui affectent 
toute la matrice. 

Les usages de canvas sont multiples. On peut y faire appel pour Faffichage de gra- 
phiques generes dynamiquement a partir de donnees variables, pour la creation de 
jeux, pour Fedition d'images et de photos en ligne, ou pour des effets cosmetiques. 

Canvas fut invente par Apple pour Safari et Dashboard. On ne doit pas son existence 
a l'initiative des groupes de travail HTML, mais plutot a son absorption progressive, 
car d'autres navigateurs ont aime Canvas et Font rapidement admis dans leur propre 
moteur. Le WhatWG suivant le principe de documenter ce qui est deja existant et 
ayant constate qu'il etait largement accepte, a choisi de Fintegrer a HTML 5. 



RESSOURCE Specification Canvas 

Canvas cote W3C 

► http://dev.w3.org/html5/spec/the-canvas-element.html 
Canvas cote WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html 



Canvas manque encore d'outils tout-en-un pour dessiner et animer sans avoir besoin 
d'ecrire toutes les instructions une par une, meme si Adobe fait des efforts en ce sens. 
Sa mise en place peut alors sembler longue, mais a l'avenir des interfaces aussi puis- 
santes que FIDE de Flash donneront acces a une creativite sans limite ! 
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L'element <canvas> 

Une zone de dessin canvas peut etre tres simplement inseree dans le flux de la page 
HTML par une balise eponyme. Void un exemple minimaliste : 

<canvas id="dessin" width="640" height="480"> 

Texte alternatif a destination des navigateurs qui ne supportent pas canvas. 
</canvas> 

A l'aide de JavaScript, quelques appels de fonction suffisent pour dessiner : 
<scri pt> 

var moncanvas = document. getElementByld('dessin') ; 
var ctx = moncanvas. getContextC 2d') ; 
ctx. fill Style = "red"; 
ctx. fill Rect(20, 30, 100, 50); 
</script> 

Cet exemple trace un simple rectangle rouge. 



Figure 8-2 

Un rectangle rouge 



Ct fi O canvas/index, htm I 



Le code source demontre que Ton passe par quatre etapes : 

1 La definition d'un espace alloue a l'aide d'une balise <canvas> possedant des 
dimensions definies (largeur et hauteur). 

2 Lacces a cet espace de dessin par un script nommant l'element <canvas> grace a 
son identifiant et la methode getElementByldO (d'autres methodes d'acces sont 
autorisees, celle-ci reste la plus directe et la plus universelle). 

3 La recuperation du contexte de dessin en deux dimensions grace a la methode 
getContext('2d'). 

4 Lapplication de methodes de dessin a ce contexte. 

Du cote de Web Kit, <canvas> est un element similaire a <img> et ne necessite pas a 
tout prix de balise de fermeture. Dans la famille Mozilla, le choix de pouvoir fournir 
du contenu alternatif (facultatif, entre les deux balises) impose un fonctionnement 
avec une balise de fermeture. Cette solution a le merite de fonctionner egalement 
sous Web Kit qui ignorera simplement cette derniere balise. 
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Base de depart et contexte graphique 

Les fonctions decrites dans ce chapitre n'accedent pas directement a l'element 
<canvas> lui-meme pour dessiner. La zone de dessin est exposee par le biais d'un 
contexte de rendu 2D, accessible au travers du canevas. La nuance n'est pas extreme- 
ment importante dans le cadre d'une utilisation normale, mais elle explique les 
methodes d'initialisation auxquelles il est necessaire de faire appel : 

1 Recuperer l'element <canvas> dans un objet moncanvas, par exemple d'apres son 
attribut i d portant la valeur dessi n et la fonction getElementById( 'dessi n ' ). 

2 Employer la methode getContext('2d') sur l'objet moncanvas pour obtenir le 
contexte en question. Le choix du nom de ces variables est libre : contexte, 
context en V.O. ou ctx par souci d'economie de clavier. 

Initialisation de canvas et du contexte 

<canvas id="dessin" width="640" hen ght="480"> 

Ce navigateur ne supporte pas canvas 
</canvas> 

<scri pt> 

var moncanvas = document. getElementByld('dessin') ; 
i f (moncanvas . getContext) { 

var ctx = moncanvas . getContext( ' 2d ') ; 

// D'autres fonctions de dessin appliquees au contexte... 

} 

</scri pt> 

Tous les exemples suivants utiliseront cette base de depart. 

Coordonnees 

Letape preliminaire a toute programmation graphique est de connaitre le referentiel 
dans lequel on se place, c'est-a-dire le systeme de coordonnees pour se reperer dans 
cet espace a deux dimensions. C'est lui qui determinera les valeurs numeriques des 
emplacements et des dimensions des futurs traces, par exemple dans le cadre d'un 
cercle : son point central et son rayon. 

Les coordonnees sont definies dans un systeme cartesien et debutent dans le coin 
superieur gauche de la zone a (0,0). Toutes les valeurs sont exprimees en pixels. Deux 
axes repondent a l'appel : horizontal (x) et vertical (y). Un point situe aux coordon- 
nees (2,3) sera done situe a 2 pixels de la gauche et 3 pixels du haut. 
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Figure 8-3 

Systeme de coordonnees 
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Or, ces coordonnees sont celles de la grille « entourant » les pixels. Si Ton trace un 
trait vertical d'une largeur d'un pixel en debutant par le point de coordonnees (2,0), 
l'ecran repartira en realite ce trait sur deux pixels, car il n'est pas en mesure d'afficher 
des demi-pixels ! 

Pour obtenir un rendu graphique net et sans bavure avec un trait se logeant dans des 
pixels entiers, l'astuce consiste a utiliser un point a mi-chemin entre deux coordon- 
nees de la grille. 

Si le trait debute aux coordonnees (4.5,0), le navigateur repartira le trait de chaque 
cote de l'axe x = 4.5, c'est-a-dire exactement entre 4 et 5, occupant une vraie zone 
large d'un pixel. 




Une fois ces principes en place, il ne reste plus qua decouvrir l'ensemble des 
methodes de dessin prevues par la specification. 
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Formes geometriques 

Les formes geometriques sont les fonctions de dessin les plus basiques. 



Tableau 8-1 Methodes de dessin de formes 



Fonction 


Role 


Detail des arguments 


fillRect(x,y,w,h) 


Rectangle plein 


x,y : coin superieur gauche du rectangle 






w,h : largeur et hauteur 


strokeRect(x,y,w,h) 


Rectangle surligne 


(similaire) 


clearRect(x,y,w,h) 


Rectangle vide (efface) 


(similaire) 



Dans le domaine des formes primitives et contrairement a d'autres API de dessin, 
Canvas ne comprend que ces quelques fonctions de la famille des rectangles. Pour 
constituer des formes plus complexes, il est necessaire d'utiliser des chemins (ou 
traces). Ce qui peut sembler une limitation laisse en realite beaucoup de liberte, car le 
developpeur peut ecrire ses propres fonctions a partir des quelques briques natives, ou 
bien utiliser un framework complementaire embarquant des dizaines de methodes 
complexes qu'il serait difficile d'inclure dans une specification au cas par cas. 

Figure 8-5 ^^^B 

Un drapeau Suisse 



Trace d'un drapeau Suisse 

// Une largeur de trait de 2 pixels 
ctx.lineWidth = 2; 

// Un beau rouge pour le remplissage 
ctx.fill Style = "red"; 
// La nuit, tous les traits sont gris 
ctx . strokeStyl e = "#ccc"; 

// Un rectangle plein (rouge) 

ctx.fill Rect (10, 10, 200, 100); 

// Deux rectangles effacant le dessin (blancs) 

ctx.clearRect(100,20, 20, 80); 

ctx.clearRect(70, 50, 80, 20); 

// Un dernier rectangle (trait gris) pour le cadre 
ctx.strokeRect(l, 1, 220, 120); 
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Chemins 

Dans l'optique de donner une plus grande liberte dans le trace de formes, Canvas 
n'embarque que peu de primitives geometriques et se repose sur les chemins. lis sont 
definis etape par etape, de point en point. 

Pour illustrer l'ensemble de ces fonctions, les exemples suivants consisteront a des- 
siner une maison de briques rouges, baignee par un lac aux eaux turquoise, protegee 
d'un soleil radieux par un palmier verdoyant. 

La base de depart est un canvas carre de 200 pixels de cote, pour lequel un contexte 
de dessin est initialise par un script. 

Debut de page pour un trace canvas 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Canvas</ti tl e> 
<meta charset="utf-8"> 
<styl e> 
canvas { 

border :lpx solid #ccc; 

} 

</styl e> 

</head> 

<body> 

<canvas id="dessin" width="200" height="200"> 

<img src="rempl acement.jpg" alt="Paysage idyllique"> 
</canvas> 

<script> 

var moncanvas = document .get El ementById( 'dessin' ) ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

// Largeur de "ligne par defaut : 5 pixels 
ctx . 1 i neWi dth = 5; 

// Suite de la demonstration... 



Tableau 8-2 Methodes de traces 



Fonction 


Role 


Detail des arguments 


beginPathO 


Debute un nouveau chemin. 


(aucun) 


closePathQ 


Ferme le chemin. 


(aucun) 
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Fonction 



Tableau 8-2 Methodes de traces (suite) 

Detail des arguments 



moveTo(x , y) 


Debute un nouveau sous-chemin avec 
le point donnS. 


x,y : point de dSpart 


lineTo(x,y) 


Ajoute le point au sous-chemin, con- 
nects par une ligne. 


x,y : point d'arrivSe 


rect(x,y,w,h) 


Ajoute un rectangle au chemin. 


x,y : point de dSpart (coin supe- 

rieur gauche) 

w, h : largeur, hauteur 


arcTo(xl,yl,x2,y2, r) 


Ajoute le point au sous-chemin, con- 
nects par un arc. 


x1,y1 : point de controle n° 1 
x2,y2 : point de controle n° 2 
r : rayon 


arc(x,y, r,al,a2,c) 


Ajoute un arc au sous-chemin, con- 
nects au point precedent par une 
ligne. 


x,y : point de dSpart 
r : rayon 

a1, a2 : angle de dSpart, fin 
c : sens de rotation 


bezi e rCu rveTo (ctxl , ct 
yl,ctx2,cty2,x,y) 


Ajoute le point au sous-chemin, con- 
nects par une courbe de Bezier. 


ctx1,cty1 : point de controle n° 1 
ctx2,cty2 : point de controle n° 2 
x,y : point d'arrivSe 


quad rati cCu rveTo (ctx , 
cty,x,y) 


Ajoute le point au sous-chemin, con- 
nects par une courbe de BSzier qua- 
dratique. 


ctx.cty : point de controle 
x,y : point d'arrivSe 



Tableau 8-3 MSthodes de remplissage et surlignage 



Fonction 


Role 


Detail des arguments 


fillO 


Applique un remplissage au chemin pour crSer 


(aucun) 




une forme pleine. 




strokeQ 


Applique un style de trait (surlignage) au che- 


(aucun) 




min. 





beginPath() et closePathO 

La premiere consiste a debuter le chemin avec beginPathO, puis a enchainer des 
appels aux fonctions ajoutant des segments droits ou courbes a ce chemin, et enfin a 
cloturer le tout avec closePathO. 

II n'est pas obligatoire de fermer tous les chemins. Selon les cas de figure, il pourra etre 
souhaitable de laisser un chemin ouvert pour ne pas tracer une forme fermee. Dans 
d'autres situations, closePathO permettra de revenir directement au point de depart 
du chemin et de fermer le polygone sans se soucier de ses coordonnees initiales. 
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Ouverture et fermeture du chemin 



ctx.finstyle = "yellowgreen" ; 
ctx . strokeStyl e = "steel bl ue" ; 
ctx.lineWidth = 20; 

ctx.beginPathO ; 

ctx . moveTo (25,25); 
ctx."lineTo(100,100) ; 
ctx."lineTo(25,100); 
ctx.closePath() ; 

ctx.finO; 
ctx . stroke() ; 

ctx.beginPathO ; 

ctx . moveTo (300 , 100) ; 
ctx."lineTo(220,100) ; 
ctx."lineTo(220,25); 
ctx."lineTo(300,100) ; 

// Sans closePath 

ctx.f-ilK); 
ctx.stroke() ; 



Figure 8-6 

Avec ou sans closePath 



avec closePath 



sans closePath 



moveToO et NneToO 

La methode moveTo (x,y) positionne le point de depart du chemin, ou d'un sous- 
chemin. II s'agit en quelque sorte de deplacer votre pinceau d'artiste en herbe au bon 
endroit pour debuter le trace. Elle ne produit aucun resultat visible sans l'aide d'une 
des autres fonctions puisqu'elle ne produit qu'un point sans aucune dimension. 

La methode 1 i neTo(x , y) deplace le pinceau virtuel depuis le point precedent vers le 
point de destination dont les coordonnees sont fournies en parametres. Elle produit 
alors le trace d'une ligne droite. 

Ces deux fonctions permettent d'ores et deja de construire le toit et les murs de la 
maison. 
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Trace de lignes 

// Toit 

ctx.moveTo(40, 80); 
ctx.lineTo(80, 40); 
ctx.lineTo(120, 80); 

// Murs 

ctx.moveTo(60, 80); 
ctx.lineTo(60, 120); 
ctx.lineToClOO, 120); 
ctx.lineTo(100, 80); 

Dans le cas present, le pinceau est positionne au point de coordonnees (40,80) puis 
deplace deux fois grace a lineToO aux points (80,40) et (120,80) pour produire les 
deux pans du toit. Une deuxieme etape repositionne le point de depart d'un chemin a 
(60,80) et termine le trace des murs par trois traits, passant successivement par 
(60,80), (60,120), (100,120) et (100,80). 

Pour le moment, les appels a ces fonctions ne produisent pas de resultat visible, car si 
le chemin a bien ete constitue, il n'a pas ete rendu graphiquement. 

fillO et strokeO 

Une fois le chemin defini, il faut lui appliquer un remplissage ou un style de trait 
pour le voir s'afficher, c'est-a-dire faire appel respectivement a fillO et/ou 
stroke(). Ces deux fonctions se servent de parametres de style definis globalement 
pour le contexte du canevas, qui seront detailles ulterieurement. 

Toute forme restee ouverte est automatiquement fermee au prealable de l'appel a 
fill (), il n'est done pas necessaire de declencher closePath(). 

Pour notre maison rouge, l'invocation de stroke () suffit pour en reveler les contours. 
Son role sera de suivre le chemin invisible trace precedemment avec un pinceau vir- 
tuel, en reliant tous les points avec le style de trait defini initialement. 

Trace effectif du chemin 

ctx. strokeO ; 

rcctO 

L'ajout d'un rectangle au chemin se fait via le raccourci rect(), qui evite l'ecriture de 
quatre appels a lineToO. Les arguments sont les coordonnees du point de depart 
(coin superieur gauche) suivies des dimensions (largeur et hauteur). 
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Ce rectangle constitue la porte d'entree de la maison. 
Trace d'un rectangle 

// Porte 

ctx.rect(75,100,10,20); 
ctx . strokeO ; 

Un nouvel appel a strokeO immediatement apres rectO reprend les proprietes gra- 
phiques precedentes pour ajouter ce rectangle au rendu du canevas. 



La methode arcToO est destinee au trace d'un arc, connaissant un point de controle, 
un point de destination et un rayon. 

Elle pourra permettre au palmier de pousser aupres de la maison. 

Au prealable, un appel a beginPathO reinitialise le depart d'un nouveau chemin, la 
propriete strokeStyle est modifiee pour choisir un beau vert, et le point de depart 
est positionne avec moveTo(). 

Trace avec arcTo 

// Palmier 

ctx. begin Path () ; 

ctx . strokeStyl e = "LimeCreen" ; 

ctx.moveTo(20,120) ; 

ctx . arcTo (20 , 30 , 160 , 120 , 20) ; 

ctx . strokeO I 

Le premier point de controle permet de tracer la premiere tangente depuis le point 
de chemin precedent a l'appel de la fonction arcTo(). Le point de destination forme 
une nouvelle tangente, et l'ensemble fournit suffisamment de renseignements pour le 
trace d'un arc dont le rayon est donne par le dernier argument. 



Figure 8-7 

Un premier rectangle 




arcToO 
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Figure 8-8 

Un arc vert 




arcO 

La methode arc() est une variante qui n'est plus parametree par des coordonnees, 
mais par un centre, un rayon et un angle de depart et de fin. 

En realite, arc() agit comme un trace de compas, ou plus prosaiquement comme 
une part de camembert (voire de munster selon la region), que Ton aurait entame 
non pas depuis le centre, mais en le coupant d'un cote a l'autre - pour peu qu'un 
cercle puisse avoir deux cotes - en suivant une des cordes. Les angles y sont mesures 
en radians. Pour convertir rapidement des degres en radians : 

var radians = deg res* (Math . PI/180) ; 

Cette methode va etre d'un grand secours pour la production d'un soleil resplendis- 
sant, c'est-a-dire un arc effectuant un tour complet a 360° pour obtenir un cercle. 

Trace d'un cercle complet 

// Soleil 

ctx . f i 1 1 Styl e = "yellow"; 
ctx . strokeStyl e = "orange"; 

ctx.beginPathO ; 

ctx. arc (150, 40, 30,0, Math. PI*2, true) ; 

ctx.fillO; 
ctx. stroke() ; 

Dans les arguments passes a la fonction, la constante JavaScript Math . PI est d'un 
grand secours pour definir un angle complet, c'est-a-dire 360° equivalant a deux fois 
71. Le dernier argument indique a true (vrai) indique que la rotation du trace se fait 
dans le sens des aiguilles d'une montre. 

Cette fois-ci, un appel a f i 1 1 () est effectue pour obtenir un remplissage complet du 
cercle, en plus de stroke () pour le contour. 
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Figure 8-9 

Un soleil 




bezierCurveToO 

Monsieur Bezier est bien connu des mathematiciens, non pas pour avoir soumis de 
nombreuses blagues aux Grosses Teres, mais pour avoir defini les courbes portant 
son nom dans les annees 1960. Ces fameuses courbes ont ete utilisees pour concevoir 
des pieces d'automobiles calculees par ordinateur. 

La methode bezierCurveToO est destinee au trace d'une telle courbe, parametree 
par deux points de controle, pouvant inverser le sens de la courbe. 



Figure 8-10 

Courbe de Bezier 




L'exemple peut alors etre complete par deux vaguelettes de couleur turquoise symbo- 
lisant le lac bordant la maison et le palmier. 

Trace de deux courbes de Bezier 

// Vaguelettes 

ctx . strokeStyl e = "turquoise"; 
ctx.beginPathO ; 

ctx.moveTo(20, 150); 

ctx . bezi e rCu rveTo (80 , 130 , 80 , 180 , 140 , 150) ; 
ctx.moveTo(20, 170); 

ctx . bezi e rCu rveTo (80 , 150 , 80 , 200 , 140 , 170) ; 
ctx . strokeQ ; 
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Figure 8-11 

Un lac 




Ressource Geometrie 

Les courbes de Bezier sur Wikipedia 

► http://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier 



quadraticCurveToO 

Dans la famille Bezier, la variante quadraticCurveToO produit une courbe quadra- 
tique. Elle n'a besoin que d'un seul point de controle et d'un point de destination, 
pouvant etre assimilee alors a une parabole. 



Figure 8-12 

Courbe de Bezier 




C'est cette derniere fonction qui ajoutera la touche finale a la demonstration : l'indis- 
pensable sourire du soleil. 

Trace d'une courbe de Bezier quadratique 

// Sourire 

ctx . begi nPath () ; 

ctx . strokeStyl e = "orange"; 

ctx.moveTo(130, 40); 

ctx .quad rati cCu rveTo (150 , 70 , 170 , 40) ; 

ctx. strokeQ ; 
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Figure 8-13 

Dessin final 




A travers cette modeste oeuvre, les fonctions relatives aux chemins ont ete explorees. 
II est tout a fait possible de les combiner, sans aucune limite, pour creer des chemins 
complexes et done des formes variees. 

Le resultat reste extremement simple pour les besoins de la demonstration, cepen- 
dant en associant differents styles, les methodes suivantes et les possibilites offertes 
par l'algorithmique JavaScript, il est envisageable de parvenir a des rendus riches et 
complexes, des animations ou des zones d'affichage interactives. 



Styles de traits, remplissages et couleurs 

Les exemples precedents mentionnent les fonctions fillO et strokeO qui 
emploient des valeurs de style, courantes au contexte, telles que f i 1 1 Styl e pour la 
couleur de remplissage et strokeStyle pour la couleur des traits. 

Pour obtenir un soleil plein, fi 11 Style fut defini a. yellow (jaune) et strokeStyle fut 
affuble successivement de differentes couleurs pour varier les rendus des traces. 

Tableau 8-4 Proprietes graphiques 



Propriete 




Valeurs 


fillStyle 


Style de remplissage a I'interieur 
des formes 


Code couleur CSS, degrade ou motif 


strokeStyle 


Style pour les lignes autour des 
formes 


Code couleur CSS, degrade ou motif 


1 i neWi th 


Largeur de ligne 


Nombre positif 


1 i neDoi n 


Style de jointure des lignes 


bevel, round, ou miter 


1 i neCap 


Forme de fin de ligne 


butt, round, ou square 


miterLimit 


Limite de fin de ligne avec mi ter 


Nombre positif 


global Al pha 


Transparence generale 


Nombre positif ou nul (0 a 1 ) 
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Les couleurs peuvent etre definies aussi bien grace a leur nom HTML, leur code 
hexadecimal ou un code RGBA. Ainsi les trois declarations suivantes sont equiva- 
lentes pour la couleur rouge : 

context . fi 11 Styl e = "red"; 
context.fi 11 Style = "#FFOOOO" ; 
context.fi UStyle = "rgba(0, 0, 255, 1)"; 

Dans le troisieme cas, avec une valeur RGBA, il est possible de moduler la transpa- 
rence alpha avec le quatrieme parametre, de (transparent) a 1 (opaque). Au-dela de 
ces couleurs existent des degrades de couleurs et des motifs constitues a partir 
d'images, affectes de la meme maniere aux proprietes fill Style et strokeStyle. 

La largeur de ligne 1 i neWi dth est definie en pixels. 



Figure 8-14 

Epaisseur de ligne 



lineWidth-2 



lineWidth=4 



lineWidth-8 



La propriete lineDoin accepte des valeurs texte correspondant a plusieurs styles de 
jointure et de fin de trace : round (arrondi), miter (assemblage) et bevel (biseau). La 
propriete 1 i neCap accepte des valeurs texte correspondant a plusieurs styles de fin de 
ligne : round (arrondi), butt (par defaut) et square (carre). 



Figure 8-15 

Styles de jointure 
et de fin de ligne 



V 



lirieCap - "round" lineCap-' butt" WM lineCap-' butt" ■■lineCap - "square" 



line|oin-"rourid" ^| lineJoiri="miter" ^| lineJoin-"miter" Fjfl linejoin-' bevel" 



miterLimit-2 



Degrades 



Outre les couleurs de remplissage unies, Canvas supporte la creation de degrades 
lineaires et radiaux. Le Web ne saurait se contenter d'un monochrome de Whiteman. 
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Tableau 8-5 Methodes de creation de degrades 



Fonction 


Role 


Detail des arguments 


addCol orStop(posi ti on , 
coiil eur) 


Ajoute un point d'arret. 


position : position du point d'arret par 
rapport a 1'ensemble du degrade (0 a 1) 
couleur : code couleur 


createLi nearCradi ent( 
xl,yl,x2,y2) 


Gee un degrade lineaire. 


x1,y1 : coordonnees du point de depart 
x2,y2 : coordonnees du point d'arrivee 


createRadi alGradi ent( 
xl.yl, rl,x2,y2, r2) 


Cree un degrade radial. 


...x1 ,y1 ,r1 : coordonnees du point de depart 
et rayon 

x2,y2,r2 : coordonnees du point d'arrivee et 
rayon 



Un degrade lineaire est cree avec createLi nearGradientO. Les couleurs sontmodu- 
lees progressivement du point de depart au point d'arrivee, sauf si des points inter- 
mediates sont ajoutes. 

Un degrade radial est cree avec createRadi alGradient(). Les trois premiers argu- 
ments creent un cercle pour le point de depart, et les trois derniers pour le point de fin. 

La methode addCol orStopO ajoute des points d'arret intermediaires dans le degrade. 
En general, le premier point de couleur est defini pour 0, et le dernier pour 1. Entre ces 
deux valeurs, d'autres points peuvent etre ajoutes pour moduler le degrade et ajouter 
des couleurs intermediaires (par exemple 0,1 pour 10 %, 0,5 pour 50 %, etc.). 

Une fois le degrade prepare, il peut etre applique aux proprietes fill Style ou 
strokeStyle pour affecter les remplissages et les contours. Attention, il reste defini 
par rapport a la surface totale du canevas, et non celle de la forme. 

Application de degrades au remplissage 

var degradeLi neai re = ctx . createLinearGradient(0 , 0, 200, 0); 

degradeLi neai re . addCol orStop(0 , 'limegreen') ; 

degradeLi neai re . addCol orStop(0 . 5 , ' gol d ' ) ; 

degradeLi neai re.addColorStop(l, 'orange') ; 

ctx. fill Style = degradeLi neai re ; 

ctx.fi 11 Rect(0, 0, 600, 100); 

var degradeRadial = ctx. createRadialGradient(300, 250,0, 300,250,300); 

degradeRadi al . addCol orStop(0 , ' red ' ) ; 

degradeRadial . addCol orStop(0 . 5 , '#fc0') ; 

degradeRadial .addColorStop(l, 'brown') ; 

ctx.fillStyle = degradeRadial; 

ctx.fi 11 Rect(0, 110, 600, 100); 
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Figure 8-16 

Degrade sur remplissage 




Application de degrade au contour 

var degradeLi neai re2 = ctx . createLinearGradient(0 , 0, 500, 500); 

degradeLi neai re2 . addCol orStop(0 , ' blue' ) ; 

degradeLi neai re2 . addCol orStop(0 . 5 , 'whi te ' ) ; 

degradeLi neai re2 . addCol orStop(l, ' red ' ) ; 

ctx.strokeStyle = degradeLi neai re2 ; 

ctx.lineWidth = 10; 

ctx.strokeRect(5, 225, 590, 100); 



Figure 8-17 

Degrade sur contour 




Transformations et etats du contexte 

Tous les traces sont admissibles a des operations geometriques : translations, rota- 
tions, mises a l'echelle et transformations. Elles sont bien souvent utilisees en con- 
jonction avec le contexte de dessin, qui permet quant a lui d'appliquer ces methodes 
dans un sous-ensemble, sans affecter toute la zone de dessin ni perturber ses coor- 
donnees de reference. 



Tableau 8-6 Methodes de transformation 



Fonction 


Role 


Detail des arguments 


scale(x.y) 


Modification de l'echelle 
(reduction ou agrandisse- 
ment) 


x,y : coefficients appliques horizontalement 

et verticalement 

(1 = Pas de redimensionnement) 


rotate(angle) 


Rotation 


angle : angle de rotation en radians 


translate(x,y) 


Translation 


x,y : deplacements appliques horizontale- 
ment et verticalement 



356 



8 - Dessin avec Canvas 



Tableau 8-6 Methodes de transformation (suite) 



Fonction 



Role 



Detail des arguments 



transform (mil , ml2 , m2 
l,m22 ,dx,dy) 


Multiplie la matrice de trans- 
formation courante par : 
mil m21 dx 
ml2 m22 dy 
1 


Matrice de transformation 


setTransform(mll, 
ml2 , m21, m22, dx, 
dy) 


Reinitialise la transformation 
courante a la matrice d'inden- 
tite, et invoque transform() 
avec les memes arguments. 


Matrice de transformation 



Les operations les plus courantes sont la modification de l'echelle, la rotation et la 
translation. Elles servent efficacement les autres methodes de dessin pour ne pas 
avoir besoin de modifier constamment leurs coordonnees, ou bien de placer toutes les 
coordonnees dans de nombreuses variables. 



Formes de base 

ctx . strokeStyl e = "#ccc" ; 
ctx . 1 i neWi dth = 2; 
ctx. fill Style = "red"; 

ctx.fi 11 Rect(10, 10, 200, 100); 
ctx.clearRect(100,20, 20, 80); 
ctx.clearRect(70, 50, 80, 20); 
ctx.strokeRect(0, 0, 220, 120); 

Les exemples ci-apres debutent tous avec le meme trace. 

Effets appliques 

// Eti rement 
ctx.scale(2,0.5); 

Le contexte est « etire » sur l'axe x (double) et « reduit » sur l'axe y (de moitie). 

// Reduction 
ctx.scale(0.3,0.5); 

Le contexte est reduit a 0,3 sur l'axe x et a 0,5 sur l'axe y. 

I// Translation 
ctx.translate(50,0) ; 
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Une translation de 50 pixels est effectuee sur l'axe x. 



// Rotation 
ctx. rotate (0. 5) ; 

La rotation est exprimee en radians et non en degres. La constante Math . PI est la 
bienvenue, sachant que Math.PI = 180°, Math.PI/2 = 90°, Math.PI/4 = 45°. 

// Transformation 

ctx. transform(l. 5,0. 1,1,0.9, 0.4,0. 5) ; 

Les matrices laissent bien souvent des souvenirs flous et sortent quelque peu du cadre 
general de cette introduction a Canvas, c'est pourquoi il vous faudra les retrouver, 
avec une emotion certaine et l'ceil humide, dans les livres de mathematiques. 



Figure 8-18 

Transformations 
du modele de base 




translate(sa.O) 



transform(1.5.0.3.1 r 0.7 r 0.4 r 0.5) 



En realite, toutes ces operations sont appliquees a I'ensemble du contexte, a partir du 
moment oil elles sont declarees. Toutes les formes ulterieures seront affectees, ce qui 
est peu pratique lorsqu'on veut repartir sur les coordonnees standard. 



saveO et restoreO 

Canvas prevoit la possibilite de sauver l'etat graphique courant, comprenant les pro- 
prietes graphiques generales (telles que fill Style, strokeStyle, lineWidth, etc.) et 
la transformation du contexte. 

Tableau 8-7 Methodes de remplissage et surlignage 



Fonction 


Role 


save() 


Sauve l'etat graphique courant dans la pile. 


restoreO 


Restaure l'etat present sur le haut de la pile. 
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Sauver le contexte 

ctx.saveO ; 

Si le contexte est sauve des le depart, il est alors possible de le retrouver a tout 
moment pour retablir les parametres d'origine. 

Restaurer le contexte 

ctx . restoreO ; 

En realite, les fonctions save() et restoreO sauvent et restaurent les etats sur une 
pile. Si save() est appelee trois fois, il faudra « depiler » trois fois egalement a l'aide 
de restoreO pour retrouver le contexte initial. 

Sauver et restaurer le contexte 

ctx . saveO ; 
ctx.scale(2,2) ; 

// Tous les traces suivants sont agrandis 
ctx. restoreO ; 

// Tous les traces suivants ne sont plus affectes 

Cette notion est importante lorsqu'il s'agit de jongler avec des methodes de dessin 
qui n'ont pas toutes pour origine le coin superieur gauche de la zone d'affichage. 

Jonglage avec save() et restoreO 

// Cette fonction trace un carre 50x50 
// a parti r du point de coordonnees (0,0) 
function carreO { 

ctx.fillRect(0,0,50,50) ; 

ctx. strokeRect(0,0, 50, 50) ; 

} 

// Etat 1 : 

ctx . strokeStyl e = "steelblue"; 
ctx . 1 i neWi dth = 1; 
ctx.fillStyle = "yellow/green"; 

ctx.saveO; // Etat 1 sauve (sans 1' avoir utilise) 

// Etat 2 : 
ctx.translate(60,60) ; 
ctx. strokeStyl e = "#c00"; 
ctx . 1 i neWi dth = 4; 
ctx.fillStyle = "orange"; 

carre() ; // Carre dessine dans 1'etat 2 
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ctx.saveO; // Etat 2 sauve 

// Etat 3 : 

ctx.translate(60,60) ; 

ctx . strokeStyl e = "white"; 

ctx.lineWidth = 1; 

ctx. fill Style = "black"; 

carre(); // Carre dessine dans 1'etat 3 

ctx. restoreO ; // Etat 2 restaure 

ctx. restoreO ; // Etat 1 restaure 

carre(); // Carre dessine dans 1'etat 1 (depart) 

Le premier carre trace est celui de 1'etat 2. Le contexte ayant subi une translation 
(60,60), son point d'origine demarre a ces coordonnees, bien que les fonctions 
fillRectO et strokeRectO soient basees surle point (0,0). 

Le deuxieme carre est celui de 1'etat 3, pour lequel une nouvelle translation (60,60) a 
ete operee. Les deux translations se cumulent, done le point de reference devient 
(120,120). C'est lui qui sert d'origine (0,0) pour la methode de trace du carre. 

Le dernier carre est celui de 1'etat 1, qui est retrouve a la fin. Deux appels a save() 
ont ete effectues, deux etats ont done ete empiles, il est necessaire d'appeler successi- 
vement deux fois restoreO pour retrouver les parametres graphiques de depart. 



Pour plus d'exemples, voir plus loin dans ce chapitre la section « Motifs et sprites ». 



L'un des interets majeurs de Canvas est de pouvoir importer des images et les mani- 
puler. Dans cette optique, il est necessaire de charger dynamiquement du contenu a 
partir de l'objet Image de JavaScript. Celui-ci peut etre issu d'une image locale au 



Figure 8-19 

Transformations 
du modele de base 




Images 
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document, voire d'un fichier charge par Drag & Drop, Ajax ou un champ <input 
type="file">. Pour utiliser ces techniques, reportez-vous aux chapitres suivants. 



Tableau 8-8 Methode de dessin d'image 



Fonction 


Role 


Detail des arguments 


d rawlmage (i mg , x , y) 


Trace une image avec ses 
propres dimensions. 


img : image 

x,y : coordonnees du coin superieur gauche 


d rawlmage, (i trig , x , y , 
largeur, hauteur) 


Trace une image redimen- 
sionnee. 


img ! image 

x,y : coordonnees du coin superieur gauche 
largeur, hauteur : dimensions de I'image de desti- 
nation 


d rawlmage (i mg , Sx , S 
y , ST argeur , Shauteu 
r , Dx , Dy , Dl argeu r , D 
hauteur) 


Selectionne une zone res- 
treinte de I'image source 
pour la coller sur le canvas 
dans une zone de position 
et dimensions definies. 


img : image 

Sx,Sy,Slargeur,Shauteur : coordonnees du coin 
superieur gauche et dimensions de la zone a 
copier de I'image source 
Sx,Sy,Slargeur,Shauteur : coordonnees du coin 
superieur gauche et dimensions de la zone de 
destination 



La methode d rawlmage () peut etre utilisee de plusieurs facons selon le rendu 
souhaite : 

1 La premiere est la plus simple et injecte I'image telle quelle sur la zone de dessin. 

2 La deuxieme permet de redimensionner I'image a la volee avant de la placer sur la 
zone de dessin, pour l'agrandir ou la reduire, au besoin en la deformant. 

3 La troisieme offre la possibility de ne retenir qu'une sous-partie de I'image pour la 
placer sur le dessin (voir la section « Motifs et sprites »). 

Trace d'images 

// Nouvel objet Image 
var img = new ImageO; 

// Definition de la source 
i mg . s rc = ' i mg/photo . j pg ' ; 

// Cestionnaire d'evenement load 
img. onload = function() { 

// Dessin de I'image 
ctx.d rawlmage (img, 0,0) ; 

// Dessin de I'image redimensionnee 

// (this fait reference a 1 'objet courant) 

ctx . d rawlmage (thi s , 2 50 , 50 , 100 , 100) ; 
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// Symetrie verticale 
ctx . seal e(l , -1) ; 

ctx.drawlmage (this, 2 50, -450, this. width/2, this. height/2) ; 

}; 

Un nouvel objet Image est cree par le script. II s'agit par defaut d'un objet vide, e'est 
pourquoi sa propriete sre doit etre modifiee par l'adresse du fichier a charger. Consi- 
derant la nature asynchrone d'un tel chargement avec HTML et JavaScript, la seule 
maniere de savoir si l'image a effectivement ete chargee avant de tenter de la dessiner 
avec la fonction drawlmage() est d'utiliser I'evenement onload. Ce dernier est 
declenche lorsque le fichier image a bien ete charge en memoire, et peut done pro- 
ceder a l'appel de drawImageQ. 



Figure 8-20 

Trace d'images 




Pixels 

Canvas etant le paradis des pixels, il etait impardonnable de ne pas le doter de 
methodes d'acces direct aux pixels eux-memes. La lecture et la modification de ces 
pixels consistent en la manipulation de tableaux de valeurs numeriques qui codent 
pour chacun ses composantes rouge, vert, bleu et alpha (transparence). 
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Tableau 8-9 Methodes de manipulation de pixels 



Fonction 


Role 


Detail des arguments 


createImageData(sw 
,sh) 


Creation d'un objet 

ImageDa ta 


sw, sh : largeur et hauteur des donnees a creer 


createImageData(im 
gdata) 


Creation d'un objet 

ImageDa ta 


imgdata : objet ImageData dont les dimensions ser- 
vent a recreer un objet vide de memes dimensions (par 
defaut les pixels sont fixes au noir transparent) 


getImageData(sx , sy 
, sw, sh) 


Lecture d'une zone 
de pixels, renvoie un 
objet ImageData 


sx.sy : coordonnees de depart (coin superieur gauche) 
sw.sy : largeur et hauteur 


putImageData(image 
data,dx,dy) 


Remplacement 


imagedata : donnees de pixels a remplacer dans la zone 
dx.dy : coordonnees de destination 


putImageData(image 
data , dx , dy , di rtyX , 
di rtyY.di rtyWith.d 
i rtyHeight) 


Remplacement 


imagedata : donnees de pixels a remplacer dans la zone 
du canvas 

dx,dy : coordonnees de destination 
dirtyX,dirtyY,dirtyWidth,dirtyHeight : permet de specifier 
une zone de destination de dimensions differentes 



Toutes ces methodes manipulent des objets de type ImageData. 

Les proprietes d'un objet ImageData sont width (largeur), height (hauteur) et data, qui 
est lui-meme un objet de type CanvasPi xel Array stockant les donnees pixel par pixel. 

L'objet CanvasPi xel Array connait le nombre de valeurs numeriques stockees grace a 
sa propriete length. On accede aux pixels individuellement, a la maniere d'un 
tableau JavaScript. 

Cette simplicite a un inconvenient : on pourrait de prime abord penser que la valeur 
atteinte par imageData.data[0] est le premier pixel, imageData.data[l] le 
deuxieme, et ainsi de suite comme pour un tableau conventionnel. II n'en est rien, car 
chaque emplacement memoire code pour une composante du pixel qui en comprend 
quatre : rouge, vert, bleu et alpha (transparence). 

On obtient done : 

• imageData.data[0] : Pixel 1, Rouge 

• imageData.data[l] : Pixel 1, Vert 

• i mageData. data [2 ]: Pixel 1, Bleu 

• i mageData. data [3] : Pixel 1, Alpha 

• i mageData. data [4] : Pixel 2, Rouge 

• i mageData. data [5] : Pixel 2, Vert 

• i mageData. data [6] : Pixel 2, Bleu 

• i mageData. data [7] : Pixel 2, Alpha 
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Avec pour chacune de ces valeurs un intervalle autorise entre et 255 (un octet), ily 
a la toutes les informations necessaires pour effectuer des traitements simples et 
complexes sur les composantes RVBA. II faudra retenir qu'une boucle iterant sur ces 
pixels devra « sauter » de 4 en 4 pour passer d'un pixel a l'autre. 

Creer des pixels 

Canvas etant une surface de dessin totalement libre, il est tout a fait envisageable de 
tracer un rendu graphique pixel par pixel. Cette operation etant fastidieuse, elle est 
souvent reservee a des operations mathematiques (fractales, courbes colorees suivant 
la souris, spirales variees). L'exemple suivant se veut minimaliste pour une meilleure 
comprehension du phenomene. 

Exemple d'utilisation de createlmageData 

<canvas id="dessin" width="300" height="300" style="border:lpx solid 
#ccc"x/canvas> 

<scri pt> 

var moncanvas = document. getElementByld('dessin') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

// Creation de donnees "vides" 

var newPixels = ctx. createImageData(moncanvas. width, moncanvas. hei ght) ; 

// Longueur maximale du tableau de donnees 
var n = newPixels. data. length; 
var i ; 

// Integral ite des pixels (0 a n) Q 
for (i =0; i < n; i +=4) { 

newPixels. data [i ] = 255; // Canal Rouge 

newPixels. data[i+3] = 127; // Canal Alpha (50%) 

} 

// Trois premiers quarts (0 a n*3/4) Q 
for (i =0; i < n*3/4; i += 4) { 

newPixels. data[i+l] = 255; // Canal Vert 

newPixels. data[i+3] = 255; // Canal Alpha (50%) 

} 

// Premiere moitie (0 a n/2) Q 
for (i =0; i < n/2; i += 4) { 

newPixels. data[i+2] = 255; // Canal Bleu 

} 
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// Premier quart (0 a n/4) Q 
for (i = 0; i < n/4; i += 4) { 

newPixels.data[i ] = 0; // Canal Rouge 

newPixels.data[i+l] = 0; // Canal Vert 

newPixels.data[i+2] = 0; // Canal Bleu 

} 

// Remplacement des pixels dans le canvas 
ctx.putImageData(newPixels, 0, 0); 

</scri pt> 

Une fois un espace memoire alloue pour les pixels, plusieurs boucles le parcourent 
successivement pour en modifier les valeurs RVBA. La premiere boucle Q, met tous 
les pixels a un rouge (R = 255) transparent (A = 127). La deuxieme boucle ©, 
modifie la composante verte a son maximum (V = 255) pour les trois premiers quarts 
en partant du haut. La combinaison R = 255 + V = 255 produit un jaune vif. La troi- 
sieme boucle ©, concerne les pixels du debut jusqu'a la moitie, et ajoute un canal 
B = 255, ce qui produit du blanc par synthese additive (R/V/B sont tous a 255). La 
derniere boucle © retablit les trois premiers canaux a 0, tout en ne modifiant pas 
l'alpha (transparence), ce qui engendre un noir complet. 

Le remplacement dans la zone de dessin intervient a la fin. 



Figure 8-21 

Creation de 4 blocs de pixels 







R=0, V=0, B mTa=255 ^^B 






^^^^^^^^^^^ 


R=255, V=255, B = 255, A=2S5 | 








R=255, V=25S, A=255 | 








R^255, A^127| 





Lire des pixels 



La lecture de pixels presente un interet certain avec l'import d'images. Cette tech- 
nique faisant appel a la methode getlmageDataO pouvant presenter des failles de 
securite si elle interprete des images ne faisant pas partie de la meme origine, elle est 
accessible seulement en consultation en ligne (http://) et sur un meme domaine, mais 
pas en fichier local (file://), sinon une exception de securite est declenchee. 
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L'exemple suivant va lire une zone de pixels de dimensions fixes depuis une image dans 
un premier element <canvas> et la copier dans un deuxieme <canvas> plus petit. 

Exemple d'utilisation de getlmageData et putlmageData 

<canvas id="dessin" width="333" height="500" styl e="border : lpx solid 
#ccc"x/canvas> 

<canvas id="dessin2" width="100" height="100" styl e="border : lpx solid 
#ccc"x/canvas> 

<scri pt> 

var moncanvas = document. getElementByld('dessin') ; 
var moncanvas2 = document . getEl ementById( ' dessi n2 ') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 
var ctx2 = moncanvas2 . getContext ( ' 2d ' ) ; 

// Chargement de 1 'image 
var img = new ImageO; 
img.src = 'img/photo. jpg' ; 
img. onload = functionO { 

// Dessi n de 1 'image 

ctx.drawlmage(img,0,0) ; 

pixel copy (0,0) ; 

} 

// Copie des pixels depuis les coordonnees indiquees © 
function pi xel copy(x , y) { 

// Recuperation des pixels pour une zone 100x100 © 

var imageData = ctx.getImageData(x,y,100,100) ; 

// Remplacement dans le canvas destination © 

ctx2 . putImageData(i mageData ,0,0); 

} 

// Gestionnaire d'evenement pour la souris © 
moncanvas . onmousemove = function(e) { 

// Les coordonnees de la souris sur le canvas sont 

// e.offsetX et e.offsetY 

pixelcopy(e.offsetX,e.offsetY) ; 

} 

</scri pt> 

Le deuxieme espace de dessin situe a cote de l'orignal recoit une copie des pixels ©, 
des que la souris est deplacee sur l'image ©. Ici, aucun traitement n'est effectue, il 
s'agit d'un transfert direct d'informations, selectionne Q depuis un carre de dimen- 
sions fixes (100 x 100 pixels) et reinjecte immediatement © avec putlmageDataQ. 
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Figure 8-22 

Lecture et copie de pixels 




Modifier des pixels 

Les methodes getlmageDataO et putlmageDataO lisent et ecrivent des ensembles 
de pixels, et nous avons vu comment acceder aux canaux RVBA de chacun d'entre 
eux. Pour les modifier, il suffit d'intercepter les valeurs lues avant de les reinjecter 
dans l'element <canvas>. Differentes operations de traitement sont alors disponibles. 
En agissant sur le canal R (rouge), la teinte de l'image est modifiee. En inversant 
tous les canaux, l'image devient un negatif. En affectant a tous les canaux une meme 
valeur calculee d'apres la luminance, l'image passe en noir et blanc. 

Exemple de manipulation de pixels avec getlmageData et putlmageData 

<canvas id="dessin" width="333" hei ght="500" style="border:lpx solid 
#ccc"x/canvas> 

<P> 

<input type="button" value="Rouge a zero" id="effetl"> 

<input type="button" val ue="Negati f " id="effet2"> 

<input type="button" value="Noir et blanc" id="effet3"> 

</p> 
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<scri pt> 

var moncanvas = document. getElementByld('dessin') ; 
var contexte = moncanvas . getContext( ' 2d ') ; 

// Chargement de 1 'image 
var img = new ImageO; 
img.src = 'image.jpg'; 
img. onload = functionO { 

// Dessin de 1 'image 

contexte. drawlmage (img, 0,0) ; 

} 

// Traitement de 1 'image 
function traitement(type) { 

// Recuperation de tous les pixels 

var imageData = 

contexte . getlmageData (0 , , contexte . canvas . wi dth , contexte . canvas . hei ght) ; 

// Modification de pixels ? 
switch(type) { 
case 1: 

imageData. data = effetl(imageData.data) ; 
break; 
case 2: 

imageData. data = ef fet2 (imageData. data) ; 
break; 
case 3: 

imageData. data = ef fet3 (imageData. data) ; 
break; 
case 4: 

imageData. data = effet4(imageData.data) ; 
break; 

} 

// Remplacement dans le canvas destination 
contexte . putlmageData (i mageData ,0,0); 

} 

// Mise a zero de la composante rouge 
function effetl(data) { 

for(i=0;i<data.length;i+=4) { 

data[i]=0; // R 

// data[i+l]; // V 

// data[i+2]; // B 

// data [i +3]; // A 

} 

return data; 

} 
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// Negatif 

function effet2(data) { 

for(i=0;i<data.length;i+=4) { 
data[i]=256-data[i] ; // R 
data[i+l]=256-data[i+l] ; // V 
data[i+2]=256-data[i+2] ; // B 
// data [i +3] ; // A 

} 

return data; 



// Noir & blanc 
function effet3(data) { 

for(i=0;i<data.length;i+=4) { 
// Calcul de la luminance 

var gris = data[i ] *0. 3+data[i+l] *0 . 59+data[i+2] *0 . 11; 
data[i]=gris; // R 
data[i+l]=gris; // V 
data[i+2]=gris; // B 
// data [i +3]; // A 

} 

return data; 

} 

// Evenement pour lancer l'effet 1 

document. getEl ementById( ' effetl' ) .onclick = function(e) { 
traitement(l) ; 

} 

// Evenement pour lancer l'effet 2 

document. getEl ementById( ' effet2 ' ) .onclick = function(e) { 
traitement(2) ; 

} 

// Evenement pour lancer l'effet 3 

document. getEl ementById( ' effet3 ' ) .onclick = function(e) { 
traitement(3) ; 

} 

</scri pt> 

Tous ces effets sont accomplis par de petits calculs mathematiques. lis suivent tous le 
meme schema : la copie de l'integralite des informations de pixels dans un objet 
ImageData, sa modification a l'aide d'une boucle parcourant le tableau de pixels, et 
son renvoi a la fonction putlmageDataO. De nombreux autres resultats sont envisa- 
geables (flou, distorsion, filtre de nettete, mosaique, etc.), a vous de jouer ! 
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Figure 8-23 

Filtres appliques aux pixels 




Motifs et sprites 

Parallelement aux degrades, des motifs peuvent etre crees a partir d'images puis 
appliques aux proprietes graphiques courantes de remplissage. Un motif consiste en 
une repetition de la meme image, sur les deux axes, ou sur un axe seulement. 

Un sprite n'est pas une boisson, mais un artifice consistant a stocker dans un seul 
fichier plusieurs images afin de les « decouper » apres chargement et de les utiliser de 
facon separee. Cette technique est semblable a celle utilisee pour les sprites en CSS. 
Dans la programmation de jeux, le principe est pousse plus loin : un meme fichier 
image peut stocker une succession de petites images pour les afficher les unes apres 
les autres et creer une animation. 



Tableau 8-10 Methodes de creation de motifs 



Fonction Role 


Detail des arguments 


createPattern 
{image, repetition) 


Creation d'un motif 


image : reference a un objet i mage 

repetition : repeat (horizontaleetverticalepardefaut), repeat-x 
(horizontale), repeat-y (verticale), no- repeat (sans) 
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La fonction c reatePatte rn () renvoie un motif, applicable par la suite a tout trace « plein » 
grace a la propriete f i 1 1 Styl e. Un meme motif peut etre utilise pour plusieurs formes. 

Creation d'un motif a partir d'une image 

// Nouvel objet Image 

var img = new Image(); 

// Definition de la source 

img.src = "motif. png"; 

// Cestionnaire d'evenement load 

img. onload = function(){ 

// Creation du motif a partir de 1 'image 

var motif = ctx.createPatternfthi s , "repeat"); 

// Dessin d'un rectangle plein avec ce motif 

ctx.rect(10, 10, 90, 90); 

ctx . f i 1 1 Styl e = motif; 

ctx.finO; 

}; 

Le principe est sensiblement equivalent a celui du chargement d'une image. Un nouvel 
objet Image est cree par le script. II s'agit par defaut d'un objet vide, c'est pourquoi sa 
propriete s rc doit etre modifiee par l'adresse du fichier a charger. Considerant la nature 
asynchrone d'un tel chargement avec HTML et JavaScript, la seule maniere de savoir si 
l'image a effectivement ete chargee avant de tenter de l'affecter a un remplissage est 
d'utiliser l'evenement onload. Ce dernier est declenche lorsque le fichier image a bien 
ete charge en memoire, et peut done comprendre l'appel a la methode 
createPatternO qui renvoie une reference au motif cree. II suffit alors de l'affecter a la 
propriete f i 1 1 Styl e pour remplir les formes concernees en cours de tracage. 

Ce principe est pousse plus en avant dans l'exemple suivant, qui manipule images, 
motifs et sprites pour creer une scene de jeu tout-en-un a l'aide de plusieurs fichiers. 



Figure 8-24 

Consequence de I'attribut 




style sur un paragraphs 
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Utilisation de motifs, images et sprites 

<canvas id="dessin" width="480" height="320"x/canvas> 
<scn'pt> 

var moncanvas = document. getElementByld('dessin') ; 
var ctx = moncanvas. getContextC 2d') ; 

// Couleur de fond Q 
ctx.fillStyle = '#0064b8' ; 

ctx . f i 1 1 Rect (0 , , moncanvas . wi dth , moncanvas .height); 

// Collection d' images Q 
var sources = { 

fond: 'img/fond.png' , 

sol : ' img/sol . png ' , 

tuyaul: ' img/tuyaul. png ' , 

tuyau2: ' img/tuyau2 . png ' , 

brique: 'img/brique.png' , 

sprites: 'img/sprites.png' 

}; 

var images = {}; 

var images_chargees = 0; 

var nb_i mages = 0; 

// Comptage des images a charger 
for(var img in sources) nb_images++; 

// Prechargement des images Q 
for(var img in sources) { 

// img contient la cle, sources[img] l'url 

images[img] = new Image(); 

images[img] .src = sources [img] ; 

images [img] .onload = function(e) { 
images_chargees++; 

if (images_chargees>=nb_i mages) dessiner() ; 

} 

} 

// Dessin avec les images chargees 
function dessiner() { 

// Fond 

ctx . drawlmage (i mages . f ond , , 0) ; 
ctx. save () ; 
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// Sol © 

ctx . t ransl ate (0 , moncanvas . hei ght-i mages . sol . hei ght) ; 

var motif_sol = ctx. createPattern (images. sol , "repeat-x") ; 

ctx.fi 11 Style = motif_sol; 

ctx.fi llRect(0, 0, moncanvas. width, 48) ; 

// Tuyau Q 

ctx.translate(304,-64); 

var motif_tuyaul = ctx. createPattern (i mages .tuyaul, "repeat-y") ; 
ctx.fi 11 Style = motif_tuyaul; 
ctx.fi HRect(0, 16, 32, 96); 

ctx.fillStyle = ctx. createPattern(i mages. tuyau2, "no-repeat") ; 
ctx.fi HRect(0, 0, 32, 16); 

// Briques © 

ctx . t ransl ate (-224 , -64) ; 

ctx.fillStyle = ctx. createPattern(i mages . brique , "repeat") ; 
ctx.fi HRect(64, 64, 96, 32); 

ctx. restoreO ; 

// Sprites. . . 

// Premier sprite (champignon) 
var posx = Math. random() ••'150+ 100; 

var posy = moncanvas. height-images. sol .height-images. sprites. height; 
ctx. drawlmage (images . sprites ,0,0, 16, 16, posx, posy , 16, 16) ; 

// Deuxieme sprite (brique question) 
var posx = 192; 

var posy = moncanvas. height-images. sol .height-images. sprites. height-120; 
ctx . drawlmage (i mages . spri tes , 16 , , 16 , 16 , posx , posy , 16 , 16) ; 

// Troisieme sprite (monstre) 
var posx = Math. random()- v 100+350; 

var posy = moncanvas. height-images. sol .height-images. sprites. height; 
ctx. drawlmage (images .sprites, 32 ,0, 16, 16, posx, posy , 16 , 16) ; 

} // Fin de la fonction dessiner 

</scri pt> 

Choisir une belle couleur de fond ne fait pas de mal ©■ La methode fillRectO 
remplit l'integralite du canvas depuis le point (0,0) jusqu'aux dimensions maximales 
lues dans les proprietes width et height. 
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Figure 8-25 

Motifs et sprites a Taction 







■ © HTML5 : Canvas 
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Le prechargement des images necessite de declarer un objet en introduction 0, 
recensant les fichiers correspondant a chacune d'entre elles. Une boucle cree des 
objets de type Image, et attend que I'evenement load soit declenche pour tous les 
fichiers, avant d'appeler la fonction dessi ner(). 

Dans cette fonction Q, les images subissent des sorts multiples. Le fond est une 
image independante occupant toute la surface avec drawlmage(). Suite a quoi le 
contexte est sauve dans la pile d'etats pour le retrouver ulterieurement. 

Le sol necessite de creer un motif repete horizontalement 0. Pour faciliter le posi- 
tionnement, le contexte est translate vers le « bas ». La valeur du decalage est calculee 
d'apres la hauteur de la surface d'affichage, a laquelle est soustraite la hauteur de 
l'image a inserer. Un rectangle aussi large que le canvas est trace, avec pour remplis- 
sage le motif elabore. 

Pour le corps du tuyau, le principe est semblable, mais le motif est repete verticale- 
ment Q. Le haut du tuyau utilise un motif « non repete » ce qui aurait egalement pu 
se traduire par drawImageO. 

Les briques suivent le mouvement, avec une autre translation aidee d'un motif repete 
horizontalement et verticalement © dans un rectangle cree par f i 1 1 Rect () . 

Le contexte est ensuite restaure a l'etat initial : le point de coordonnees 0,0 retourne 
dans le coin superieur gauche de la surface d'affichage. Le positionnement des der- 
niers elements utilise drawImageO et des coordonnees horizontales aleatoires pour le 
champignon et le monstre 0. Ces deux protagonistes voient done leur emplacement 
« bouger » sur le sol a chaque rafraichissement du document HTML. 
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Voici la scene desormais complete, constitute dynamiquement d'apres differents 
fichiers images et susceptible d'evoluer au cours du temps et en fonction des dimen- 
sions de l'element <canvas>. En attendant d'en faire plus... 

Tcxtc 

Pour completer l'ensemble des fonctions de dessin, et pour eviter de nombreux maux 
de tete dans le trace de lettres pixel par pixel, Canvas beneficie de fonctions embar- 
quees pour le texte. 

Dans le contexte, des proprietes graphiques globales definissent le style du texte 
(police, alignement). Pour tracer des mots ou des paragraphes avec des styles differents, 
il faut modifier ces proprietes avant chaque appel aux methodes de creation de texte. 

Tableau 8-11 Proprietes graphiques 



Propriete 


Role 


Valeurs 


font 


Style de police 


Syntaxe CSS (valeur par defaut : lOpx sans-seri f) 


textAlign 


Alignement horizontal 


start (defaut), end, left, center, right 


textBaseline 


Alignement vertical 


top, hangi ng, mi ddl e, al phabeti c (defaut), 






ideographi c, bottom 



La valeur de font est prevue pour comprendre la syntaxe CSS relative aux polices 
(fontes). La propriete textAlign controle l'alignement horizontal du texte par rap- 
port a son point de reference defini dans les methodes de creation de texte. La pro- 
priete textBasel i ne controle l'alignement vertical du texte. 

Tableau 8-12 Methodes de creation de texte 



Fonction 


Role 


Detail des arguments 


fillText(txt,x,y, 
maxw) 


Texte plein 


txt : chame de texte 

x,y : coordonnees sur le canvas 

maxw : largeur maximale (optionnel) 


st rokeText (txt , x , y , 
maxw) 


Contour de texte 


txt : chame de texte 

x,y : coordonnees sur le canvas 

maxw : largeur maximale (optionnel) 


measureText(txt) 


Renvoie I'espace 
necessaire pour un 
texte (en pixels) 


txt : chame de texte 



Les methodes fillTextO et st rokeText () tracent respectivement un texte plein 
(avec la valeur de f i 11 Styl e), et un texte pour lequel seul le contour est visible (avec 
la valeur de strokeStyl e). 
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Trace de texte 



// Trace du texte 1 

ctx.font = '30pt Comic Sans MS'; 

ctx . textAl i gn = "start"; 

ctx . textBasel i ne = "top"; 

// Premiere "ligne 

ctx.strokeText("Ton the t'a-t-i"l" ,0,0) ; 

// Deuxieme ligne 

ctx.font = ' 50pt Comic Sans MS'; 

ctx . 1 i neWi dth = 3; 

ctx.strokeText("6te ta toux ?",0,25); 



// Trace du texte 2 
ctx.font = '20pt Georgia'; 
ctx. textAl ign = "right"; 

ctx . f i 1 lText(" . . . di sai t la tortue au tatou" , 350 , 110) ; 

Pour obtenir ces trois lignes de texte, deux appels sont effectues a strokeTextO, avec 
un changement intermediaire sur la taille de la police et la largeur du trait 
(lineWidth), puis un appel a fillTextO avec un alignement a droite en partant des 
coordonnees definies pour cette fonction. 



Texte avec police douteuse 

©td t© t®yx 7 

...disait la tortue au tatou 

La methode measureText() renvoie la largeur potentiellement occupee par un texte. 
Mesure de texte 
var mesure = ctx. measureText("HTML5") .width; 

La librairie CanvasText facilite grandement ces taches avec une syntaxe proche de 
CSS pour un code plus concis, avec le support de « classes », de retours a la ligne et 
de paragraphes de texte definis par un seul appel. 

Librairie Canvas et texte 

CanvasText 

► http://www.canvastext.com/ 
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Ombrages 



Des effets d'ombrage sont prevus par Canvas, ce qui est une bonne nouvelle en soi, 
car les calculer pixel par pixel n'est pas une mince affaire. Quatre proprietes contro- 
lent le rendu de l'ombrage a partir de sa source. 



Propriete 



Tableau 8-13 Proprietes graphiques 

Valeurs 



shadowOffsetX 


Etendue de l'ombrage sur I'axe horizontal (X) 


Nombre entier, positif, negatif ou nul 


shadowOffsetY 


Etendue de l'ombrage sur I'axe vertical (Y) 


Nombre entier, positif, negatif ou nul 


shadowBl ur 


Valeur du flou 


Nombre entier positif ou nul 


shadowCol or 


Couleur de l'ombrage 


Code couleur ou RGBA 



Les textes, les traces et les images sont tous affectes par les proprietes d'ombrage si 
celles-ci sont definies. En affectant une valeur RGBA a un ombrage, il est possible 
de definir son opacite de maniere plus douce avec le quatrieme parametre (de a 1). 

Formes et texte avec ombrage 

// Configuration des ombrages pour le rectangle 
ctx. shadowOffsetX = 0; 
ctx. shadowOffsetY = 0; 
ctx . shadowBl ur = 15; 

ctx. shadowCol or = ' rgba(204 , 69 , 228 , 1) ' ; 

// Trace d'un rectangle 
ctx.fillStyle = '#fff ' ; 
ctx.fillRectC10,10,150,150) ; 

// Trace d'un autre rectangle 
ctx.fillStyle = '#9f0c9d'; 
ctx . f i 11 Rect ( 50 , 50 , 70 , 70) ; 

// Configuration des ombrages pour le polygone 
ctx. shadowOffsetX = 0; 
ctx. shadowOffsetY = 20; 
ctx . shadowBl ur = 10; 

ctx. shadowCol or = 'rgba(0, 0, 0, 0.2)'; 

// Traces 

ctx.strokeStyle = '#2e6996'; 
ctx . 1 i neWi dth = 5; 
ctx.fillStyle = '#b2d7f3' ; 
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// Ligne 

ctx.moveTo(300,150) ; 
ctx.lineTo(350,100); 

// Triangle 1 
ctx.moveTo(350,150) ; 
ctx.lineTo(400,100) ; 
ctx.lineTo(450,150); 

// Remplissage puis contour 

ctx.fillO; 

ctx.stroke() ; 

// Fin du trace et nouveau chemin 
ctx.closePath() ; 
ctx.beginPath() ; 

// Triangle 2 
ctx.moveTo(480,150) ; 
ctx.lineTo(530,100); 
ctx.lineTo(580,150); 

// Contour puis remplissage 

ctx.strokeO ; 

ctx.fillO; 

// Configuration des ombrages pour le texte et 1 'image 
ctx.shadowOffsetX = 5; 
ctx.shadowOffsetY = 5; 
ctx.shadowBlur = 5; 

ctx.shadowColor = 'rgba(0, 0, 0, 0.2)'; 

// Trace d'un texte 

ctx.f ill Style = '#444' ; 

ctx.font = 'bold 20pt Arial .Verdana' ; 

ctx . f i llText("A 1 'ombre des ceri si ers" , 190 , 50) ; 

// Une image 
var img = new Image(); 
img.src = ' img/apercu . jpg ' ; 
img. onload = functionO { 

// Dessin de 1 'image 

ctx . drawlmage(i mg , 190 , 70) ; 

}; 

La succession d'instructions provoque des ombrages de natures differentes. Les rectan- 
gles se superposent avec un ombrage sans offset, produisant un effet equilibre de tous les 
cotes. Le premier est blanc, c'est pourquoi on ne peut visualiser que l'ombrage lui-meme. 
Le texte, les images et les formes suivantes utilisent des decalages de plusieurs pixels. 
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Les traces obliques demontrent que l'ombrage est affecte par l'ordre dans lequel les 
methodes strokeO et fill () sont appelees : si le trait seul est bien ombre, les trian- 
gles engendrent des resultats differents selon que le remplissage est effectue avant ou 
apres le contour. 



Figure 8-27 

Effets d'ombrage 




A I'ombre des cerisiers 





Transparence, compositions et masques 

L'art de combiner plusieurs niveaux de dessin se superposant consiste a utiliser la 
transparence, les effets de composition et les masques. 

Transparence generate 

La transparence des formes tracees decoule de la propriete global Alpha. Sa valeur 
doit etre comprise dans i'intervalle [0,1], sachant que represents la transparence 
totale et 1 l'opacite. 

Mise en oeuvre de globalAlpha 

var moncanvas = document . getEl ementById( ' dessi n ') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 
var w = ctx . canvas .wi dth ; 
var h = ctx . canvas . hen ght ; 
ctx.fi 11 Style = "#789"; 

ctx. global Alpha = 0.5; 

// Trace de rectangles aleatoires 
var a = Math . randomO * (w-60)/2 ; 
var b = Math.randomO i; (h-60)/2; 
for(i=0;i<6;i++) { 

a+=10 ; 

b+=10 ; 

ctx . f i 1 1 Rect (a , b , a , b) ; 

} 
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Figure 8-28 

Transparence globale 




globalAlphai = 0.5 



Les rectangles semblent se superposer, car ils sont tous transparents. Les couleurs de 
remplissage s'additionnent. Cette propriete est concernee paries methodes save() et 
restoreQ. 



Compositions 



La propriete globalCompositeOperation regit la facon dont sont menees les opera- 
tions de composition sur le canvas, pour les traces, les formes et les images, en plus 
de la transparence. 

Par defaut, la valeur source-over produit un effet de superposition, c'est-a-dire que 
la derniere forme tracee recouvre de facon opaque (hors modification de 
gl obal Al pha) le contenu deja present. C'est 1' effet que Ton retrouve de facon logique 
dans la plupart des programmes de dessin. 

Dessin d'un rectangle puis d'un cercle 

ctx.fillStyle = "steelblue"; 
ctx . f i 11 Rect (10 , 10 , 80 , 80) ; 

ctx. globalCompositeOperation = "source-over"; 
ctx . f i 1 1 Styl e = "YellowCreen" ; 
ctx.beginPathO ; 

ctx . arc(100 , 100 , 60 , , Math . PI*2 , true) ; 
ctx.fi 11() ; 

Les autres valeurs tiennent compte des formes en jeu et de leur couleur pour produire 
des effets differents (decoupe, multiplication, combinaison, masque, etc.). La source 
est consideree comme l'image ou la forme en cours d'ajout, tandis que la destination 
est le contenu deja present. 



Valeur 



Tableau 8-14 Valeurs de globalCompositeOperation 
Description 



source-over 


La source se retrouve par-dessus la destination (par defaut). 


source-in 


La source est visible uniquement la ou source et destination se recouvrent. 
Tout le reste est rendu transparent. 


source-out 


La source est visible uniquement la oil elle ne recouvre pas la destination. 


source-atop 


La source est visible uniquement la oil source et destination se recouvrent. 
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Valeur 



Tableau 8-14 Valeurs de globalCompositeOperation (suite) 
Description 



desti nati on -over 


La source est dessinee derriere le contenu existant. 


desti nati on-i n 


Le contenu existant reste visible uniquement la oil source et destination se 
recouvrent. Tout le reste est rendu transparent. 


destination-out 


Le contenu existant reste visible uniquement la oil il ne recouvre pas la 
source. 


destination-atop 


Le contenu existant reste visible uniquement la oil source et destination se 
recouvrent. La source est dessinee derriere le contenu existant. 


1 i ghter 


La couleur est determinee par addition la oil source et destination se recou- 
vrent. 


darker 


La couleur est determinee par soustraction la oil source et destination se 
recouvrent. 


copy 


Seule la source est dessinee, tout le reste est retire. 


xor 


Source et destination sont rendues transparentes la oil elles se recouvrent, 
et dessinees de facon normale sinon. 



Pour une meilleure comprehension, rien de tel qu'un apercu visuel. 



Figure 8-29 

Compositing 






destination-aver 





destination-out 
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Masques 

Un masque dissimule une region de la zone d'affichage, tout en revelant 1' autre region. 



Tableau 8-15 Methodes de composition 



Fonction 


Role 


clipO 


Utilise le chemin courant comme masque. 



Par defaut, la region du masque (clip) est initialisee a un rectangle possedant les dimen- 
sions de l'element <canvas> et positionne aux coordonnees (0,0). Un appel a la methode 
clipO cree une nouvelle region de masque, en calculant l'intersection du masque cou- 
rant et la zone couverte par un chemin trace. Le nouveau masque calcule remplace le 
precedent. Les sous-chemins sont implicitement fermes pour calculer ce masque. 

Masque intersection de deux cercles 

<canvas i d="dessi n" width="333" height="500"x/canvas> 
<scri pt> 

var moncanvas = document. getElementByldC dessin') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

var img = new ImageO; 
img.src = 'img/photo. jpg' ; 

// Creation du chemin 
ctx . begi nPath () ; 

// Cercle centre sur 100,100, rayon 150 
ctx. arc (100, 100, 150, 0, Math. PI * 2, false); 
// Cercle centre sur 200,200, rayon 150 
ctx.arc(200, 200, 150, 0, Math. PI * 2, false); 
ctx.closePathO ; 

// Masque sur le chemin courant (les deux cercles) 
ctx.clipO ; 

img. onload = function() { 
// Dessin de 1 'image 
ctx . drawlmage(i mg , 0, 0); 

} 

</scri pt> 

Le masque cree dans cet exemple demeure le cas le plus courant, il combine deux traces 
de cercles pour creer une « fenetre » sur le contenu image avec la methode cl i p () . 
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Figure 8-30 

Masque addition 
de deux cercles 




Masque intersection de deux cercles 

<canvas id="dessin" wi dth="333" height="500"x/canvas> 
<scri pt> 

var moncanvas = document . getEl ementById( ' dessi n 1 ) ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

var img = new ImageO; 
img.src = 'img/photo. jpg' ; 

// Cercle de coordonnees 100,100 
ctx.beginPath() ; 

ctx.arcClOO, 100, 150, 0, Math . PI * 2, false); 
ctx.closePathO ; 

// Masque sur le chemin courant 
ctx.clipO ; 

// Cercle de coordonnees 200,200 
ctx. begin Path O ; 

ctx.arc(200, 200, 150, 0, Math. PI * 2, false); 
ctx.closePathO I 

// Masque sur le chemin courant 
ctx.clipO ; 

img. onload = function() { 
// Dessin de 1 'image 
ctx.drawImageO'mg, 0, 0); 

} 

</scri pt> 
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Ce masque est une intersection des deux cercles. Son processus de creation differe : 
un premier masque est cree d'apres un premier cercle, active grace a cl i p(). Puis un 
deuxieme cercle est cree avec un leger decalage, suivi d'un autre appel a clipO qui 
considere alors l'intersection du masque deja actif (le premier cercle) et de celui en 
voie de creation (le deuxieme). 




Masque suivant la souris 

<canvas i d="dessi n" width="333" height="500"x/canvas> 
<scri pt> 

var moncanvas = document. getElementByld('dessin') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

var img = new ImageO; 
img.src = 'img/photo. jpg' ; 

"img. onload = functionO { 
ctx.saveO ; 

// Cercle de coordonnees 100,100 
ctx.beginPathO ; 

ctx.arc(100, 100, 150, 0, Math. PI * 2, false); 

ctx.closePathO ; 

// Clip sur le chemin courant 

ctx.clipO ; 

// Dessin de 1 'image 

ctx . drawlmage(i mg , 0, 0); 

ctx. restoreO ; 

} 

// Gestionnaire d'evenement souris 
moncanvas .onmousemove = function(e) { 

ctx . saveO ; 

ctx.beginPathQ ; 
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// Cercle centre sur les coordonnees de la souris 

ctx.arcCe.offsetX, e.offsetY, 100, 0, Math. PI * 2, false); 

ctx.closePathO ; 

ctx.clipO ; 

// Dessin de 1 'image 

ctx.drawlmage(img, 0, 0); 

ctx. restoreQ ; 



</scri pt> 

Ce masque dynamique est une premiere incursion dans le domaine de l'interactivite 
avec la souris. Au chargement de l'image, un premier masque est cree suivant un 
cercle. A chaque mouvement du dispositif de pointage sur l'element <canvas> 
declenchant un evenement mousemove, une fonction recueille les coordonnees du 
curseur (e.offsetX et e.offsetY). Cette position sert de point de reference au trace 
d'un nouveau cercle qui se voit ajoute au masque avec clipO. II est necessaire de 
tracer a nouveau l'image et de faire appel aux fonctions save() et restoreO pour 
faire apparaitre les nouvelles zones a l'affichage. 



Figure 8-32 

Masque dynamique 
controle a la souris 




Controle clavier et souris 

Un soupcon d'interactivite nest pas de trap avec Canvas. En tant qu' element 
HTML a part entiere, il beneficie de tous les evenements DOM (clavier, souris, 
navigateur) pouvant survenir et de toutes les fonctions JavaScript afferentes. 
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Souris 

Le controle a la souris est disponible avec les evenements click, dbl click, 
mousedown, mouseup, mousemove, mouseenter et mouseleave. Declarer des gestion- 
naires pour chacun d'entre eux est un premier pas, completer la fonction en est un 
autre. Celle-ci regroupe les instructions necessaires a l'ajout de traces, d'images, de 
formes ou au rafraichissement global de la zone de dessin. 

Le code source suivant cree une modeste ardoise dans le navigateur, equipee d'une 
palette pour les changements de couleur. 

Surface de dessin libre controlee par la souris 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Canvas</title> 
<meta charset="utf-8"> 
<style> 
body { 

background:#eee; 

text-align:center; 

padding-top: 10%; 

} 

.palette span { 
di spl ay : i nl i ne-bl ock ; 
width :40px; 
height :40px; 
cursor:pointer; 
border:2px solid transparent; 
border-radius:4px; 

} 

.palette span: hover { 
border-color:white; 

} 

canvas { 
cursor:crosshai r; 
border: 5px solid #666; 
background: white; 
border-radius:4px; 
box-shadow: Opx Opx 20px #666; 
margin-top :20px; 

} 

</style> 

</head> 

<body> 
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<!-- Palette de couleurs Q --> 

<div class="palette"> 
<span oncl i ck="modi f i erCoul eur ( '#206BA4 ' ) 
<span oncl i ck="modi f i erCoul eur ( '#54A4DE ' ) 
<span oncl i ck="modi f i erCoul eur( '#BBD9EE' ) 
<span oncl i ck="modi fi erCoul eur ( ' #BEDF5D ' ) 
<span oncl i ck="modi fi erCoul eur ( ' #D6EB9A' ) 
<span oncl i ck="modi fi erCoul eur ( ' #FF9834 ' ) 
<span oncl i ck="modi f i e rCoul eu r ( ' #FFBF80 ' ) 
<span oncl i ck="modi fi erCoul eu r ( ' #F6E896 ' ) 
<span oncl i ck="modi fi erCoul eur( ' #b07d42 ' ) 
<span oncl i ck="modi fi erCoul eur ( ' #FF5349 ' ) 

</div> 

<!-- Canvas --> 
<canvas id="dessin" width="480" height="360"x/canvas> 

<script> 

var moncanvas = document. getElementByld ('dessin') ; 
var ctx = moncanvas.getContext('2d'); 

var en_dessin = false; 

// Proprietes graphiques par defaut Q 
ctx.strokeStyle = "black"; 
ctx.lineWidth = 2; 

// Bouton de souris active Q 
moncanvas .onmousedown = function(e) { 

// Dessin active 

en_dessin = true; 

// Repositionnement du debut du trace 
ctx . moveTo(e . of f setX , e . of f setY) ; 

}; 

// Mouvement de souris © 
moncanvas .onmousemove = function(e) { 
if (en_dessin) dessiner(e.offsetX,e.offsetY) ; 

}; 

// Bouton de souris relache 
moncanvas . onmouseup = function(e) { 

// Dessin desactive 
en_dessin = false; 

}; 

// Ajoute un segment au trace © 
function dessiner(x,y) { 

ctx.lineTo(x,y) ; 

ctx.strokeO ; 

} 



" style="background:#206BA4"x/span> 

" style="background:#54A4DE"x/span> 

" style="background:#BBD9EE"x/span> 

" style="background:#BEDF5D"x/span> 

" style="background:#D6EB9A"x/span> 

" style="background:#FF9834"x/span> 

" style="background:#FFBF80"x/span> 

" style="background:#F6E896"x/span> 

" style="background:#b07d42"x/span> 

" style="background:#FF5349"x/span> 
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II Modification de la couleur du contexte Q 
function modifierCouleur(codeCouleur) { 
if (codeCouleur) ctx.strokeStyle = codeCouleur; 

} 

</script> 

</body> 
</html> 

La palette de couleurs est une succession d'elements <span> Q qui font appel a la 
fonction modifierCouleurO Q lorsqu'ils sont cliques pour modifier la propriete 
strokeStyle definie par defaut ©. 

Lorsque le bouton de la souris est enfonce ©, la variable en_dessi n est definie a true 
pour signifier que Ton entre dans une phase active et que tout mouvement ulterieur 
devra produire un trace. 

Lorsque le curseur est deplace ©, et si en_dessin vaut true, la fonction dessinerO 
est appelee avec les coordonnees souris contenues dans l'evenement. Elle ajoute 
un segment au trace grace a 1 i neTo() et le concretise a l'affichage grace a stroke(). 

Lorsque le bouton de la souris est relache ©, la variable en_dessin est definie a 
fal se pour arreter le trace si la souris se deplace encore. 

La presentation de l'ensemble est regie par des regies CSS pour rendre l'interface 
plus attrayante. 



Figure 8-33 

Mini « Paint » 
dans le navigateur 





/ © HTM Li : Canvas 


«- 




a ^ 

































388 



8 - Dessin avec Canvas 



Clavier 

La gestion du clavier est analogue, avec l'interception de l'evenement keypress, 
keyup ou keydown. La valeur de la touche enfoncee correspond a un code numerique 
stocke dans la propriete event. keyCode. 

Lardoise de dessin peut desormais etre controlee uniquement au clavier pour la 
transformer en un Telecran (nostalgie, nostalgie...). 

Un telecran 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Canvas</ti tl e> 
<meta charset="utf-8"> 
<styl e> 
body { 

background:#eee; 

text-al i gn : center ; 

paddi ng-top : 10%; 

} 

canvas { 

border: 5px solid #666; 
background :whi te ; 
border- radi us : 4px ; 
box-shadow: Opx Opx 20px #666; 

} 

</styl e> 

</head> 

<body> 

<canvas id="dessin" w"idth="480" height="360"x/canvas> 
<script> 

var moncanvas = document . getEl ementById( ' dessi n ') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

ctx . strokeStyl e = "black"; 
ctx . 1 i neWi dth = 5; 
ctx.lineCap = "round"; 

// Calcul du centre Q 
var x = moncanvas .wi dth/2 ; 
var y = moncanvas . hei ght/2 ; 

// Position de depart (au centre) Q 
ctx.moveTo(x,y) ; 
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// Gesti onnai re d' evenement keydown Q 
i f (document . body . onkeydown) { 

document . body . onkeydown = dessiner; 
} else if(document) { 

document . onkeydown = dessiner; 

} 

// Deplacement du "pinceau" Q 
function dessiner (event) { 
switch (event. keyCode) { 
case 38: // Haut 

event. preventDefault() ; 
if(y>=5) y-=5; 
break; 

case 40: // Bas 

event. preventDefault() ; 

if (y<moncanvas. height) y+=5; 
break; 

case 39: // Droite 

event. preventDefault() ; 

if (x<moncanvas. width) x+=5; 
break; 

case 37: // Gauche 

event. preventDefault() ; 

if(x>=5) x-=5; 
break; 

} 

// Trace d'apres le decalage effectue 
ctx.lineTo(x,y) ; 
ctx . strokeO ; 

}; 

</scri pt> 

</body> 
</html> 

La mise en place consiste a reprendre l'interface precedence, mais a la modifier 
quelque peu. Le pinceau est positionne par defaut au centre ©, calcule d'apres les 
dimensions Q de I'element <canvas>. 

Le document attend un evenement keydown (touche enfoncee) pour declencher © la 
fonction dessiner(). Celle-ci re9oit l'objet evenement dans lequel est renseigne le 
code de la touche clavier qui a ete utilisee. En comparant cette valeur aux quatre 
codes possibles (haut, bas, droite, gauche), les coordonnees x et y du pinceau sont 
incrementees ou decrementees. La methode lineTo() ajoute un segment avec cette 
nouvelle position, et stroke () se charge de la touche finale. 
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Figure 8-34 

Mini « Telecran » 
dans le navigateur 





p 


1 





Animation et jeux 

La grande force de Canvas est de profiter a la fois de la puissance de JavaScript pour 
developper des algorithmes de rendu graphique, mais aussi de l'acceleration materielle 
dans tous les navigateurs modernes. Cette osmose confere a Canvas la possibilite de 
creer des animations sous la forme d'images se succedant tees vite a intervalles reguliers. 



Figure 8-35 

Etapes d'animation 



Dessin | Effacer ^ Dessin ... / 



L' animation repose sur plusieurs principes : 

1 La zone de dessin doit etre effacee a chaque etape, avec clearRectO pour pou- 
voir constituer une nouvelle image sur une surface vierge. 

2 Letat doit etre sauve avec save() pour pouvoir le restaurer a la prochaine image si 
les proprietes graphiques generales ont ete modifiees (transformations et styles). 

3 Les traces doivent etre dessines, en tenant compte des eventuelles modifications liees 
a l'animation (deplacements, redimensionnements, apparitions, disparitions, etc.). 

4 Letat peut etre restaure. 

En JavaScript, declencher une fonction rafraichissant l'affichage a intervalles regu- 
liers suppose de faire appel a setlnterval () qui admet en argument le nom de la 
fonction a executer periodiquement, et un intervalle en millisecondes. 
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Animation avec setlnterval() 

<canvas id="dessin" width="640" hen ght="480"x/canvas> 
<scri pt> 

var moncanvas = document. getElementByld('dessin') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

ctx.lineWidth = 2; 

ctx. fill Style = "rgba(206,0,0,255)"; 
// Positionnement au centre 

ctx . trans! ate (moncanvas . wi dth/2 .moncanvas . hen ght/2) ; 
var i=0; 

function dessiner() { 

ctx .trans! ate(4 , 1) ; 
ctx. rotate(0.2) ; 
ctx.fi 11 Rect(i,0,20,20); 
i++; 

if (i>400) cl earlnterval (inter) ; 
ctx.fillStyle = " rgba(206 ,0 , , 255) " ; 



var inter = setlnterval (dessiner , 10) ; 

</script> 

La fonction dessiner() est appelee toutes les 10 millisecondes - soit en theorie 
100 images par seconde - et se base sur I'incrementation de la variable i pour modi- 
fier le contexte graphique (translation, rotation et couleur de remplissage). La 
methode cl earlnterval () arrete l'animation une fois 400 boucles accomplies. 



} 



Figure 8-36 

Vos paupieres sont lourdes... 
lourdes... 
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Cependant, une reponse plus appropriee a ete developpee pour ameliorer la fluidite des 
animations: window. requestAnimati on Frame () et l'optimisation de la puissance 
requise. Elle presente l'avantage d'harmoniser les rafraichissements graphiques du navi- 
gateur entre differents elements sur la page, et de ne pas consommer de ressources si le 
document HTML n'est pas visible (par exemple dans un onglet inactif). Votre batterie 
vous remerciera. 

Sa disponibilite est progressive, a partir de Firefox 4, Chrome 11, Internet Explorer 10, 
le tout avec des prefixes pour chaque moteur, le temps que la specification se stabilise. II 
est done conseille de conserver une alternative avec setlnterval (). Paul Irish a concu 
un petit extrait de code a cet effet, qui est present dans cet exemple. 

Animation avec requestAnimationFrame 

<canvas i d="dessi n" width="640" hen ght="480"x/canvas> 
<scri pt> 

var moncanvas = document . getEl ementById( ' dessi n ') ; 
var ctx = moncanvas . getContext( ' 2d ') ; 

ctx . 1 i neWi dth = 5; 

ctx.strokeStyle = " rgba(206 , , , 255) " ; 
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0; 
ctx . shadowBI ur = 15; 
ctx.shadowColor = '#000'; 

ctx . trans 1 ate (moncanvas . wi dth/2 , moncanvas . hen ght/2) ; 
var i = 0; 

// requestAnimationFrame shim (par Paul Irish) 
wi ndow. requestAnimFrame = (function(){ 
return window. requestAnimationFrame [| 

window. webkitRequestAnimationFrame | | 

window. mozRequestAnimationFrame | 

window. oRequestAnimationFrame | 

window. msRequestAnimationFrame | 

function(callback, element) { 

wi ndow. setTimeout(cal 1 back, 1000/60) ; 

}; 

})(); 

// Fonction de dessin 
function dessiner() { 

ctx . trans! ate (3 , 1) ; 

ctx. rotate(0.2) ; 

ctx. begi nPathQ ; 
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ctx.moveTo(0,i) ; 
ctx.~lineTo(i+l,i) ; 
ctx . ~l i neTo(i ,i+10) ; 
ctx.closePathO ; 
ctx . strokeO ; 

ctx.strokeStyle = "rgba(206, ,0, 255)" ; 

// Nouvelle iteration 
requestAnimFrame(dessiner) ; 

} 

// Premier appel de la fonction de dessin 
dessinerO ; 

</scri pt> 

Une fois executee, la fonction dessi ner() demande explicitement d'etre appelee une 
nouvelle fois grace a requestAnimationFrame(). C'est ainsi que i'animation perdure, 
tant que le navigateur lui donne la main. 



Figure 8-37 

Qui veut jouer au mikado ? 




Jeux 

Les jeux crees avec Canvas ne sont au final qu'un savant melange de toutes ces fonc- 
tionnalites, un choix approprie de graphismes et une manipulation de donnees stoc- 
kees en tableaux et objets varies. Toutes les briques de base sont disponibles pour 
assurer un developpement complet : images, formes, sprites, evenements clavier et 
souris, voire video et son. 

De nombreux frameworks existent pour faciliter la conception d'interfaces et leur 
positionnement, la gestion des deplacements, des collisions et des controles, les 
transformations d'elements graphiques ou d'environnements de jeu. 

Reportez-vous aux librairies mentionnees en fin de chapitre. 
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Video et audio 

Ce qui est merveilleux avec les technologies ouvertes et interoperables c'est qu'elles 
se connaissent intimement et savent profiter de leurs avantages mutuels. 

Integrer une video <video> HTML 5 dans <canvas> est un jeu d'enfant qui consiste 
a utiliser la methode drawImageO, non plus avec un objet image, mais avec la video 
en question. C'est cette fonction qui replique le contenu graphique dans le canvas. 

Video dans <canvas> 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Canvas + Video</title> 
<meta charset="utf-8"> 
<style> 
canvas { 

border : lpx dashed #ccc; 

} 

vi deo { 

border :5px solid #0094e9; 

} 

</styl e> 

</head> 

<body> 

<!-- Element video Q ~ _> 

<video id="mavideo" width="720" hei ght="406"> 

<source src="bunny .mp4" type="vi deo/mp4"> 

<source src="bunny .ogv" type="vi deo/ogg"> 

<source src="bunny .webm" type="vi deo/webm"> 
</video> 

<!-- 2 Canvas Q --> 
<di v> 

<canvas id="dessinl" width="360" hei ght="203"x/canvas> 
<canvas id="dessin2" width="360" hei ght="203"x/canvas> 
</di v> 

<!-- Controles Q --> 

<input type="button" val ue="Lecture Video" oncl i ck="vi deo . pi ayO ; "> 
<input type="button" value="Stop Video" oncl i ck="vi deo . pause() ; "> 
<input type="button" value="Stop Canvas" 
oncl i ck="cl earlnterval (i nter) ; "> 

<scri pt> 

var moncanvasl = document . getEl ementById( ' dessi nl ') ; 
var ctxl = moncanvasl . getContext( ' 2d ') ; 
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var moncanvas2 = document . getEl ementById( ' dessi n2 ') ; 
var ctx2 = moncanvas2 . getContext ( ' 2d ' ) ; 

var video = document. getEl ementById('mavi deo') ; 

// Proprietes general es 
ctxl.scale(0.5,0.5); 

ctx2 . t ran si ate (-video .width/4 , -vi deo . height/4) ; 

// Un intervalle de temps regulier 

if (video) var inter = setlnterval (dessi nVi deo , 40); 

// Fonction executee periodiquement 
function dessi nVi deo() { 

i f( ! i sNaN(vi deo . duration)) { 

// Dessi n de la video dans les deux contextes0 
ctxl.drawImage(video, 0, 0); 

ctx2 .drawImage(video, 0, 0, video. width, vi deo . hei ght) ; 

} 

} 

</scri pt> 

</body> 
</html> 

Le document est compose cl'un element <vi deo> et de deux <canvas> qui pos- 
sedent la moitie des dimensions de la video originale. Des controles activent ou 
desactivent la lecture et la copie de Video a Canvas. Des transformations sont appli- 
quees aux contextes ©, respectivement un redimensionnement de moitie et une 
translation pour centrer la vue. 

La video etant composee de multiples images se succedant, il est necessaire de faire 
appel a drawlmage() a de courts intervalles reguliers, grace a la fonction 
setlnterval () de JavaScript qui recoit en arguments la fonction appelee 
dessi nVideo() etle delai entre chaque appel, en millisecondes. 

Chaque declenchement de fonction recopie le contenu dans chacun des contextes 
avec drawImageO, en appliquant les transformations. Le premier appel pour ctxl est 
effectue en precisant le point de reference pour le dessin de l'image (0,0), le deuxieme 
pour ctx2 mentionne la zone (totale) a recopier. Dans le cas present, ils sont equiva- 
lents. En indiquant des coordonnees differentes, il est envisageable de ne placer dans 
<canvas> qu'une sous-partie du rendu video. Tous les autres traitements et effets sont 
possibles en temps reel. 

Concernant l'audio, l'API est disponible de la meme facon (hormis l'absence de 
rendu visuel), et controlable avec JavaScript. 
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Que ce soit pour declencher des sons dans un jeu ou prevoir une musique de fond 
durant une animation, les methodes equipant <audio> et son API sont au service de 
<canvas> et des evenements pouvant survenir. 



Prise en charge 

Du cote d'Internet Explorer, HTML 5 Canvas est supporte nativement uniquement 
depuis la version 9. II existe cependant une librairie alternative permettant un usage 
minimal de Canvas sur les versions plus anciennes. Les autres navigateurs ont un 
taux de turn-over pour les mises a jour suffisamment important pour considerer que 
les principales versions utilisees disposent toutes de Canvas. 
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Navigateur 

Mozilla Firefox 
Internet Explorer 
Apple Safari 
Google Chrome 

LlBRAlRlE Support de Canvas 

ExplorerCanvas pour IE <9 

► http://code.google.eom/p/explorercanvas/ 

L'ajout de cette librairie reste relativement aise. En voici un exemple : 
Ajout d' ExplorerCanvas pour IE 

<head> 

<! — [if It IE 9]><script src="excanvas . js"x/script><! [endif]--> 
</head> 

<scri pt> 

var el = document . createEl ement( ' canvas ') ; 
G_vml CanvasManager . i ni tEl ement(el ) ; 
var ctx = el .getContext('2d') ; 
</script> 

La conception meme de cette librairie necessite d'y faire appel dans la section <head> 
du document HTML, avant une quelconque apparition de la balise <canvas>. Le 
commentaire conditionnel <!--[if It IE 9]> ... <![endif]--> permet de ne 
charger ce script que pour Internet Explorer pour les versions inferieures a 9, sans 
penaliser les autres navigateurs. 

La librairie canvas-text implements des fonctions de trace de texte (strokeText, 
fillText, measureText) sur les navigateurs ne les connaissant pas encore, notam- 
ment Firefox 2/3.0, Internet Explorer 6+, Opera 9.x a 10.5, Safari 3, Chrome dans 
ses toutes premieres versions. FlashCanvas vise a reproduire en Flash les instructions 
developpees pour Canvas et done a apporter une alternative en Flash pour les naviga- 
teurs supportant ce plug-in, mais pas I'element <canvas>. 

Librairie ExplorerCanvas 

Canvas-text, fonctions de trace de texte 

► http://code.google.eom/p/canvas-text/ 
FlashCanvas, Flash a la rescousse 

► http://flashcanvas.net/ 
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Version 

3+ 



9+ 
3.1 + 

T+~~ 



Navigateur 



Version 



Opera 


9+ 


Android 


2.1 + 


iOS (iPhone, iPad, iPod) 


3.2+ 


Opera Mobile 


10+ 
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Librairies 

Des l'apparition de <canvas>, de nombreuses librairies ont vu le jour pour apporter 
des fonctions simplifiant la manipulation de traces, de formes et la creation d'anima- 
tions. II en apparaitra d'autres encore, grace a l'engouement de la communaute de 
developpement autour de cet outil standardise et libre. La plupart embarquent des 
methodes pour la construction d'objets et d'interactions avec une ecriture de code 
plus compacte. D'autres sont vouees a la creation d'animations impressionnantes de 
fluidite. C'est ainsi qu'une des demonstrations technologiques de Paper.js est consa- 
cree au Nyan Rainbow, variante du fameux Nyan Cat. 



Librairies Dessin avec Canvas 

Paper.js 

► http://paperjs.org/download/ 
EaselJS 

► http://easeljs.com/ 
KineticJS 

► http://www.kineticjs.com/ 
jCanvaScript 

► http://jcscript.com/ 
jCanvas (jQuery) 

► http://calebevans.me/projects/jcanvas/ 
Artisan JS 

► http://artisanjs.com/ 
oCanvas 

► http://ocanvas.org/ 



Une poignee de librairies se sont specialisees dans le developpement de jeux pour le Web, 
a l'aide des API disponibles. Les resultats sont convaincants et promis a un bel avenir. 



Librairies Moteurs et frameworks pour developpement de jeux 

ImpactJS 

► http://impactjs.com/ 
CraftyJS 

► http://craftyjs.com/ 
IsonicEngine 

► http://www.isogenicengine.com/ 
MelonJS 

► http://www.melonjs.org/ 
box2dweb 

► http://code.google.eom/p/box2dweb/ 
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Et la 3D ? 

L'arrivee de la 3D sur le Web est predite depuis de nombreuse annees. II faut dire qu'en 
tant que paradis des communautes virtuelles, il s'agit du domaine de predilection pour 
la construction d'univers paralleles. Jusqu'a l'arrivee de Canvas, de nombreuses experi- 
mentations ont ete menees avec plus ou moins de succes, toujours avec des extensions 
proprietaires et des langages varies : VRML en 1994 certifie ISO en 1997, X3D en 
2001 avec une base XML, Cult3D, et d'autres plug-ins plus exotiques. 

Ressource Specification WebGL 

WebGL 1 .0 via le Khronos Group 
► http://www.khronos.org/webgl/ 

Le socle <canvas> a permis le saut vers WebGL, qui est un ensemble tees proche 
d'OpenGL ES 2.0 pour le Web et adapte a JavaScript. Celui-ci vise a etee mis en 
ceuvre nativement dans les navigateurs, sans extension supplementaire, et avec accele- 
ration materielle si possible. Le WebGL Working Group reunit Apple (Safari), 
Google (Chrome), Mozilla (Firefox) et Opera. Ce consensus parmi les editeurs 
majeurs, hors Microsoft malheureusement, promet un support standardise et efficace. 



Ressource Au sujet de WebGL 

Experimentations de Google pour Chrome 

► http://www.chromeexperiments.com/webgl 
Experimentations par Hakim El Hattab 

► http://hakim.se/experiments 
Experimentations par Mr Doob 

► http://mrdoob.com/ 
Canvas 3d JS Library 

► http://www.c3dl.org/ 



Au moment de la redaction de cet ouvrage, seuls les moteurs de Firefox 4+ et 
Chrome 9+ font preuve d'un support de WebGL, avec la methode 
getContext("expen'mental -webgl ")• La programmation 3D necessitant de solides 
connaissances en programmation et mathematiques, et pouvant de surcroit faire 
l'objet de nombreux ouvrages a part entiere, sort quelque peu du cadre de ce chapitre 
d'initiation a Canvas 2D. C'est pourquoi je ne peux que vous conseiller, vaillant lec- 
teur, de vous orienter vers les multiples ressources existant sur le Web. 
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Et le graphisme vectoriel (SVG) ? 

Canvas repose sur la manipulation d'images bitmap et de pixels. C'est-a-dire avec 
une zone de resolution fixe ne pouvant s' adapter ou se redimensionner dynamique- 
ment a toutes les configurations de peripheriques de visualisation, hors anticipation 
specifique par le developpeur. Travailler avec des petits carres de taille fixe plutot 
qu'avec des coordonnees relatives est simple d'acces, pour les graphistes qui ont 
I'habitude de faire face a des millions de pixels tous les jours. Cela peut cependant 
presenter un inconvenient a l'heure ou les plates-formes necessitent des adaptations 
constantes avec des resolutions changeantes. 

SVG ( Scalable Vector Graphics) est un format d'images vectorielles, decrit en XML. II 
ne repose pas sur les memes principes que Canvas. C'est un ensemble de balises qui 
decrivent le contenu de l'image a l'aide de formes simples. 

Contrairement aux images matricielles, ces formes peuvent etre redimensionnees, 
manipulees de differentes facons, sans subir d'alteration, car le moteur de rendu 
recalculera a chaque fois le contenu de la zone d'affichage d'apres les informations 
fournies initialement. Point d'effet d'escalier a l'horizon. 



Ressource Specification SVG 

Specification par le W3C 
► http://www.w3.org/TR/SVG/ 

En revanche, l'ensemble des traces etant defini en XML, cela signifie que les ele- 
ments SVG sont de veritables elements DOM, accessibles et pouvant etre indexes 
par les moteurs de recherche. II ne s'agit plus d'une soupe opaque de pixels pour un 
lecteur d'ecran ou un robot. 

Cela signifie egalement que la description du contenu d'une image complexe pourra 
vite se reveler verbeuse. Lideal etant alors de pouvoir appliquer une compression (par 
exemple ZIP) au SVG pour faciliter son transit sur le reseau. 

Le format SVG pourra etre privilegie, selon les cas de figure, pour les formes sim- 
ples, l'interaction ; tandis que Canvas sera plus competent pour la performance de 
dessin et les animations. 

Un document SVG 

<?xml version="1.0"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 

"http : //www . w3 . org/TR/2001/REC-SVC-20010904/DTD/svglO . dtd"> 
<svg xm"! ns="http : //www.w3 . org/2000/svg"> 
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<style type="text/css"> 

ci rcl e : hover {f i 1 1 -opaci ty : . 9 ; } 
</style> 

<g styl e="f i 1 1 -opaci ty : . 7 ; "> 

<circle cx="6cm" cy="2cm" r="100" style="fil"l :#FBC935;" 
transform="translate(0, 50)" /> 

<circle cx="6cm" cy="2cm" r="100" style="fill :#5F85C5 ; " 
transform="transl ate (70 , 150) " /> 

<circle cx="6cm" cy="2cm" r="100" style="fi"l~l :#AACD46; " 
transform="transl ate (-70 , 150) "/> 

</g> 

</svg> 



Figure 8-39 

Exemple de dessin SVG 




Les possibilites offertes par SVG sont tres nombreuses, ce qui en fait desormais un 
format de fichier vectoriel de predilection : 

• formes, styles et traces ; 

• couleurs, remplissages, degrades et motifs ; 

• compositions, clip et masques ; 

• filtres et effets ; 

• transformations et systeme de coordonnees ; 

• interactivite ; 

• animation et scripts ; 

• polices. 

Creation au format SVG 

La majorite des logiciels de dessin vectoriel 2D propose la prise en charge de SVG, 
nativement ou bien a l'import/export. II n'est done pas necessaire d'ecrire du code 
XML a l'aide d'un simple editeur de texte, bien que cela soit tout a fait possible et 
complementaire. 
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Inkscape est une excellente solution open source, equipee de nombreux outils magiques. 



Figure 8-40 

Inkscape 




Ressource Programmes vectoriels supportant SVG 

Inkscape 

► http://inkscape.org/?lang=fr 
GIMP 

► http://www.gimp.org/ 
Karbonl 4 (KOffice sous KDE) 

► http://www.koffice.org/artwork/ 
Adobe Illustrator 

► http://www.adobe.com/ 

Inclusion HTML 

Depuis les debuts de SVG sur le Web, un fichier image peut etre inclus dans un 
document HTML avec la balise <object>. 

SVG avec <object> 

<object type="image/svg+xml " data="image. svg" width="800" height="600"> 

<p>Texte a~l ternati f : pas de support SVG</p> 
</object> 

Les navigateurs s'acheminent egalement tous vers l'interpretation directe avec les 
balises <img> et l'usage dans les feuilles de style CSS, notamment en arriere-plan 
(background). 
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SVG avec <img> 

<img src="image. svg"> 

Dans cette situation, il est preferable de specifier des dimensions a l'aide des attributs 
width et height pour eviter toute interpretation hasardeuse de la zone a allouer a 
l'image par defaut. 

SVG avec CSS 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : SVC et CSS</tit1e> 
<meta charset="utf-8"> 
<styl e> 
#svg { 

width :300px; 

height:200px; 

background : url (image. svg) ; 

} 

</style> 

</head> 

<body> 

<div id="svg"> 
</div> 

</body> 
</htm"l> 

Par defaut, le rendu SVG n'est ni etire ni repete en arriere-plan. 

En HTML 5, il est prevu de pouvoir inclure du code SVG directement dans le 
document, avec la balise <svg>. 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : SVC</title> 
<meta charset="utf-8"> 
</head> 
<body> 

<svg xml ns="http : //www . w3 . org/2000/svg"> 

<style type="text/css"> 

ci rcle: hover {fi"l"l-opacity:0.9;} 
</styl e> 

<g styl e="f ill -opacity: 0. 7; "> 
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<circle cx="6cm" cy="2cm" r="100" styl e="fi 11 :#FBC935 ; " 
transform="transl ate(0 , 50) " /> 

<circle cx="6cm" cy="2cm" r="100" styl e="fi 11 :#5F85C5 ; " 
transform="transl ate (70 , 150) " /> 

<circle cx="6cm" cy="2cm" r="100" styl e="fi 11 :#AACD46 ; " 
transform="transl ate (-70 , 150) "/> 

</g> 

</svg> 

</body> 
</html> 

Cette forme est deja atteignable avec certaines pirouettes en XHTML, servi avec un 
en-tete applicati on/xhtml +xml permettant 1'inclusion d'uri code XML (le SVG lui- 
meme) dans un autre code XML (c'est-a-dire la page en XHTML). 

Syntaxe 

Le contenu SVG s'articule de la meme facon que le XML sur lequel il est construit. 
Un ensemble de balises sont prevues pour accomplir des roles particuliers (tracer une 
forme, appliquer un effet, appliquer une animation). Leur arborescence constitue le 
document image. 

Dans l'exemple precedent, il est possible de constater la presence d'un bloc initial 
<style> qui definit 1' effet applique au survol des elements <circle>, eux-memes 
presents dans la racine <g> qui contient tous les graphismes a proprement parler de 
l'image en SVG. 

On devine aisement que <ci rcle> vise a tracer un cercle, et que ses attributs XML 
lui conferent un style particulier. Par exemple r pour le rayon, puis cx et cy pour les 
coordonnees du centre sur les deux axes. 

Citons parmi les balises les plus courantes : <circle>, <text>, <rect>, <line>, 
<ellipse>, <polygon>, <mask>, <1 i nearGradi ent>, <pattern>, <path>. 

De l'interactivite peut etre embarquee dans SVG avec des scripts et la gestion d'eve- 
nements tels que onmousedown et onmouseover. 
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Support 



Navigateur 



Tableau 8-17 Tableau de support de SVG 1 .1 (partiel) 



Version 



Navigateur 



Mozilla Firefox 


3.0+ 


Internet Explorer 


9.0+ 


Apple Safari 


3.0+ 


Google Chrome 


7+ 



Version 



Opera 


9+ 


Android 


3.0+ 


iOS (iPhone, iPad, iPod) 


1.0+ 


Opera Mobile 


10+ 



SVG est une specification tres vaste, qui n'est que rarement implementee totalement 
dans les moteurs de rendu. Les premieres etapes furent accomplies avec SVG 1.1 
Tiny qui est un sous- ensemble simplifie de la specification complete, puis avec cette 
derniere. II est possible de produire neanmoins de tres bons resultats avec les fonc- 
tions de base. Ce tableau de support ne dresse done qu'un resume du support partiel 
de SVG, les navigateurs etant tres inegaux sur certains modules. 



Rappel 

Consultez le site d'accompagnement pour des informations a jour sur la prise en charge des navigateurs. 



Alternatives et librairies 

Google a developpe un projet libre nomme SVGWeb pour effectuer le rendu gra- 
phique d'un fichier SVG au travers de l'extension Flash. Cela permet un support a 
partir d'Internet Explorer 6. 

Raphael est une librairie JavaScript independante qui simplifie la creation de gra- 
phismes vectoriels et d'animations, en SVG pour les navigateurs recents et en VML 
sous Internet Explorer anterieurement a la version 9. Son support est vaste : 
Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer 6.0+. 

De nombreuses autres librairies visent a la creation de graphiques SVG a partir de 
langages executes cote serveur, tels que PHP. 



Librairies Developpement SVG avec SVGWeb et Raphael 

► http://code.google.eom/p/svgweb/ 

► http://raphaeljs.com/ 
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Figure 9-1 Outil eprouve pour la geolocalisation 
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La geolocalisation est la capacite a se positionner geographiquement sur un plan ou 



Avec l'introduction de la mobilite et des appareils relies en permanence a Internet 
(telephones et ordinateurs portables, tablettes) la capacite de pouvoir definir avec une 
precision relative sa propre position geographique, vis-a-vis de l'environnement et 
des autres usagers, a pris tout son interet. 

De nombreuses applications pratiques ont deja vu le jour : 

• des recherches contextualisees, le moteur affichant les resultats etant les plus per- 
tinents dans la zone geographique concernee ; 

• des calculs d'itineraires ou de position sur une carte, par exemple avec Google 
Maps et Bing Maps ; 

• des partages de localisations geographiques dans les reseaux sociaux, au travers de 
la notation de lieux ou de la prise de photos avec meta-informations. 

Plusieurs methodes de positionnement existent : 

• par GPS (et bientot Galileo) ; 

• par triangulation dans un reseau de telephonie sans fil (GSM, 3G, LTE, etc.) ; 

• par triangulation de reseaux Wi-Fi/RFID/Bluetooth a portee - il existe des bases de 
donnees geographiques recensant les adresses MAC des points d'acces detectes lors de 
l'exploration des villes par des voitures equipees d'ordinateurs portables et de GPS ; 

• par adresse IP - il existe des bases de donnees telles que Google Location Servi- 
ces etablissant les correspondances entre blocs d'adresses delivrees geographique- 
ment par 1'IANA et ensuite par les fournisseurs d'acces. 

Un navigateur (ou un systeme d'exploitation) peut combiner plusieurs d'entre elles selon 
leur disponibilite et leur precision, les deux dernieres necessitant d'etre connecte a Internet. 

Sur une plate-forme mobile equipee d'un GPS, le navigateur embarque pourra faire 
appel a ce systeme de positionnement. Sur un poste fixe qui n'en est pas equipe, un 
navigateur classique devra se baser sur l'adresse IP. 



une carte. 



Figure 9-2 

Principes de geolocalisation 






Serveur Base de 

donneesIP 



Base de 
donnees 
WlFI/MAC 




Triangulation Navigateur 
reseaux mobiles 
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La geolocalisation n'est pas a proprement parler dependante de HTML 5, mais il 
s'agit bien d'une API web en plein essor. 



Principe 



La geolocalisation repose sur des informations tres simples : les coordonnees de lati- 
tude, de longitude et d'altitude. Ces trois valeurs suffisent pour se positionner dans 
un espace en trois dimensions. 

Lors de l'appel aux fonctions de geolocalisation, un avertissement est affiche par le 
navigateur, precisant quel site demande l'acces aux informations ainsi que les choix 
disponibles : accepter ou refuser. Durant ce temps, la page web n'a acces a aucune des 
donnees demandees. Elles ne seront delivrees qu'apres acceptation. Cet imperatif de 
confidentialite est requis par la specification. 



Figure 9-3 

Demande d'autorisation 
sous Firefox 



[J HTML5 :Geolocalisatian | + | 

^ J ^ | I Cf I I "A" I O D | http://?^K ^^^Vgeolocalisation/ 
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En sa voir plus.,. Partager sa localisation ▼ 



Figure 9-4 

Demande d'autorisation 
sous Chrome 




Figure 9-5 

Demande d'autorisation 
sous Internet Explorer 
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Figure 9-6 

Demande d'autorisation 
sous iOS 
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La procedure peut ensuite necessiter quelques secondes, selon la methode de detec- 
tion employee. L'API a la capacite d'etre sollicitee pour effectuer une seule requete 
de position, ou pour un suivi repete, par exemple dans le cas d'un deplacement. 

En revanche, aucune garantie nest donnee quant a 1' exactitude des coordonnees 
retournees par le navigateur. Celui-ci peut tres bien etre soumis aux aleas d'une detec- 
tion erronee, ou de coordonnees volontairement faussees par un utilisateur averti. 

Quelques options peuvent etre passees en argument pour preciser les conditions de 
l'appel a l'API concernant la precision, la duree maximale d'execution lors de la geo- 
localisation, et la duree de validite des coordonnees placees en memoire cache. 

On associe aussi a la latitude et la longitude des informations supplementaires facultatives. 
Celles-ci peuvent representer la precision des valeurs obtenues, la vitesse ou la direction. 



Specification API Geolocalisation 

La specification de l'API de geolocalisation est disponible sur le site du W3C. 
► http://www.w3.org/TR/geolocation-API/ 



Les mains dans le code 

S'agissant de code JavaScript et DOM, l'ensemble des instructions doivent etre 
declarees dans un element <script>. La geolocalisation fait appel a l'objet 
geolocation, membre de navigator (ou wi ndow. navi gator). 
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Detection simple 

if (navigator. geolocation) { 

// L'API est disponible 
} else { 

// Pas de support, proposer une alternative ? 

} 



Dedencher la localisation 

Deux methodes de l'objet geolocation sont disponibles: 

• getCurrentPositionO pour une requete unique ; 

• watchPositionO pour un suivi continu de la position. 

Ces methodes acceptent en arguments : 

• une fonction de callback (obligatoire), appelee de facon asynchrone en cas de suc- 
ces des que le resultat est obtenu ; 

• une deuxieme fonction de callback (facultative), appelee en cas d'erreur ; 

• un ensemble d'options PositionOptions (facultatif). 

Exemple avec getCurrentPosition 

function affichePosition(position) { Q 

// Afficher la position dans la page ou sur une carte... 

} 

navi gator . geol ocati on . getCurrentPosi tion(af f i chePosi ti on) ; Q 

Attention: getCurrentPosition Q retourne immediatement, et tente de reunir les 
informations de maniere asynchrone avant d'appeler Q la fonction de callback 
(af f i chePosi ti on) et de lui fournir un objet de type Position contenant ces donnees. 

Exemple avec watch Position 

function surveillePosition(position) { 

// Rafraichir regul i erement la position affichee 
// dans la page ou sur une carte... 
} 

var survld = navigator. geolocation. watchPosition(surveillePosition) ; 

// Pour annuler la surveillance continue 
function annulerO { 

navi gator. geolocation. clearWatch(survId) ; Q 

} 



411 



HTML 5 - Une reference pour le developpement web 

watchPosi ti on O renvoie un identifiant de ressource Q, qui permet d'annuler le suivi 
continu avec © la fonction clearWatchO. On fait egalement appel a une fonction de 
callback pour recuperer un objet Position. 

Travailler avec la position et les coordonnees 

Un objet de type Position contient des proprietes accessibles en lecture seule : 

• timestamp : la date a laquelle la position a ete acquise ; 

• coords : les coordonnees. 

La propriete coords de type Coordinates contient des precisions : 

1 1 ati tude : la latitude ; 

2 1 ongi tude : la longitude ; 

3 accuracy : le coefficient de precision ; 

4 altitude : l'altitude (optionnel) ; 

5 altitudeAccuracy : la precision sur l'altitude (optionnel) ; 

6 headi ng : la direction (optionnel) ; 

7 speed : la vitesse (optionnel). 

On devine aisement que les donnees essentielles pour une geolocalisation de base seront 
la latitude et la longitude, c'est-a-dire les variables position. coords. latitude et 
posi tion . coords . 1 ongi tude. En detail, les objets mis en jeu sont : 

Tableau 9-1 Position 



Propriete 


Unite 


Type 


timestamp 


millisecondes 


DOMTimeStamp 


coords 


voir ci-dessous 


Coordinates 


Tableau 9-2 Coordinates 


Propriete 


Unite 


Type 


1 ati tude 


degres decimaux 


double 


longitude 


degres decimaux 


double 


accuracy (optionnel) 


metres 


double 


altitude (optionnel) 


metres 


double 


altitudeAccuracy (optionnel) 


metres 


double 


speed (optionnel) 


metres/seconde 


double 


headi ng (optionnel) 


degres (0° a 360° par rapport au nord 
dans le sens des aiguilles d'une montre) 


double 
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L'objet Position est amene a evoluer, pour accepter une propriete address, pouvant 
recueillir des informations sur l'adresse postale avec les enfants suivants : streetNumber, 
street, premises, city, county, region, country, countryCode, postalCode. La 
methode de detection sera alors combinee a un service de geocodage inverse, charge de 
trouver ces renseignements a partir d'une base de donnees, selon les capacites du systeme. 

La vitesse (speed) et la direction (headi ng) peuvent etre calculees a partir de la prece- 
dente position de I'utilisateur s'il y a lieu. 

Exemple avec affichage des coordonnees sur la page 

<!-- Un element HTML pour recueillir les informations --> 
<div id="maposition"x/div> 

<scri pt> 

// Fonction de callback en cas de succes 
function succesGeo(posi ti on) { 

var infopos = "Position determinee : <br>"; 

infopos += "Latitude : "+position. coords. latitude +"<br>"; 

infopos += "Longitude: "+position. coords. longitude+"<br>" ; 

infopos += "Altitude : "+position. coords. altitude +"<br>"; 

document. getElementById("maposition") .innerHTML = infopos; 

} 

// Demande de position 

navi gator . geol ocati on . getCurrentPosi tion(succesGeo) ; 

</scri pt> 



Figure 9-7 

Resultat de la requete 
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Position determinee : 




Latitude : 48.5817 




Longitude: 7.750555 




Altitude : 







Gestion des erreurs 

Puisque la geolocalisation n'est pas d'une fiabilite extreme et depend de nombreux 
parametres variant quantitativement et qualitativement (possibilite technique, accord 
de I'utilisateur, reception des donnees), elle est assortie d'un gestionnaire d'erreurs. 
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Les methodes getCurrentPositionO etwatchPositionO acceptentune fonction de 
callback pour la gestion des erreurs en deuxieme argument. Cette fonction recoit un 
objet PositionError qui renseigne sur la cause de l'erreur en cas d'insucces. 

Tableau 9-3 Objet PositionError 



Propriete 


Type 


code 


unsigned short 


message 


DOMString 



La propriete code possede, selon le contexte, une valeur numerique parmi les 
suivantes : 

• UNKNOWN_ERROR : La localisation a echoue pour une raison inconnue. 

• PERMISSION_DENIED : La localisation a echoue car le navigateur n'a pas obtenu la 
permission : l'utilisateur a refuse. 

• POSITION_UNAVAILABLE : La position n'a pu etre determinee par les moyens tech- 
niques (GPS, reseau) mis a disposition. 

• TIMEOUT : Le temps imparti est ecoule sans qu'une position ne soit obtenue. 

Tandis que message renseigne par une chaine de texte comprehensible par un 
humain, mais uniquement dans un but de developpement, elle ne doit pas etre affi- 
chee a l'utilisateur. 

Options supplementaires 

Les methodes getCurrentPositionO et watchPositionO acceptent un objet 
PositionOptions en troisieme argument (facultatif). Celui-ci introduit des parame- 
tres (tous optionnels) pour la procedure de localisation qui s'averent utiles de par la 
disparite des precedes techniques de geolocalisation et la difference qualitative des 
donnees calculees. 

Les telephones mobiles par exemple, exploitent a la fois le systeme GPS et la triangula- 
tion vis-a-vis des antennes de reseau implantees par l'operateur telephonique. Cette 
derniere est rapide, econome en ressources, mais peu precise relativement a la densite 
des equipements implantes dans la zone geographique. Elle suffira neanmoins pour 
evaluer grossierement dans quel quartier se situe l'utilisateur, afin de lui indiquer les 
meilleurs restaurants ouverts s'il a un petit creux et une envie de choucroute. 

Pour d'autres usages tels que le guidage, le GPS sera indispensable, car il faudra 
obtenir une resolution de quelques metres grace aux satellites en orbite pour pouvoir 
determiner la rue empruntee et la direction a adopter. La mise en ceuvre sera plus 
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couteuse et reveillera la puce GPS interne au mobile, d'ou un delai plus long de mise 
en route et de calcul. Meme James Bond n'y echappe pas. 

Ainsi, selon les besoins de l'application web, Ton pourra agir sur ces parametres : 

• enableHighAccuracy : demande de fournir une position en haute precision, si le 
materiel le supporte et que l'utilisateur en donne la permission. La requete peut 
alors necessiter un temps supplementaire. En general, cette option est prevue pour 
signifier avec une valeur f al se que Ton souhaite economiser les ressources (reseau et 
consommation d'energie) si une precision elevee n'est pas absolument necessaire. 

• timeout : specifie explicitement un delai de temps d'attente au bout duquel la 
fonction retournera une erreur (voir code precedent) si la position n'a pu etre 
determinee. Le calcul debute apres acceptation par l'utilisateur. En specifiant une 
valeur nulle, la fonction retournera immediatement la derniere position en cache 
si celle-ci existe, tout en provoquant une erreur avec un code TIMEOUT. 

• maxi mumAge : autorise le systeme a repondre immediatement avec une valeur 
memorisee en cache, provenant d'une requete precedente. Par exemple, s'il n'est 
pas necessaire d'obtenir une position de toute premiere fraicheur et par conse- 
quent de provoquer une nouvelle geolocalisation, une valeur de 
120 000 millisecondes (2 minutes) tolerera le renvoi du meme precedent resultat 
s'il a ete obtenu dans cet intervalle de temps. 

Tableau 9-4 Objet PositionOptions 



Propriete 


Type 


Unite 


Valeur par defaut 


enabl eHi ghAccu racy 


boolean 




false 


timeout 


long 


millisecondes 


Infinity 


maxi mumAge 


long 


millisecondes 






Exemple avec options et gestion des erreurs 



<!-- Un element HTML pour recueillir l'affichage --> 
<div id="maposition"x/di v> 

<script> 

// Fonction de callback en cas de succes 
function succesCeo(position) { 

var infopos = "Position determinee : <br>"; 

infopos += "Latitude : "+position. coords. latitude +"<br>"; 

infopos += "Longitude: "+position. coords. longitude+"<br>" ; 

infopos += "Altitude : "+positi on. coords. altitude +"<br>"; 

document. getElementById("mapositi on") .innerHTML = infopos; 

} 



415 



HTML 5 - Une reference pour le developpement web 



II Fonction de callback en cas d'erreur 
function erreurCeo(error) { 

var info = "Erreur lors de la geolocalisation : "; 
switch(error.code) { 
case error. TIMEOUT: 

info += "Timeout !"; 
break; 

case error. PERMISSION_DENIED: 

info += "Vous n'avez pas donne la permission"; 
break; 

case error. POSITION JJNAVAILABLE: 

info += "La position n'a pu etre determinee"; 
break; 

case error. UNKN0WN_ERR0R: 

info += "Erreur inconnue"; 
break; 

} 

document. getElementById("maposition") .innerHTML = info; 



// La requete demande une position dont l'age ne doit pas 
// exceder 2 minutes. Si celle-ci n'existe pas ou n'est pas 
// assez recente, 1 'agent utilisateur tente d'en acquerir 
// une nouvelle. 

navi gator. geolocati on .getCurrentPosition(succesCeo,erreurCeo, {maximumAge: 120000}) ; 

</script> 



Utiliser une carte 

En general, le premier interet d'une geolocalisation est de positionner I'utilisateur sur 
une carte. Pour cela, Ton peut se servir avantageusement de l'API Google Maps. 



RESSOURCE API Google Maps 

Le framework geo-location-javascript 

► http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html 



De nombreuses fonctions sont disponibles pour la configuration de l'affichage des 
cartes, des marqueurs de position, et des differents services gravitant autour du coeur 
de l'API, par exemple le calcul d'itineraires ou le trace de zones geographiques. 

L'inclusion de la librairie sur une page HTML se fait via une simple balise <scri pt>. 
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Exemple avec carte issue de I'API Google Maps 

<!-- Un element HTML pour recueillir 1 'affichage --> 
<div id="maposition"x/di v> 

<!-- Un element HTML pour recueillir la carte Q --> 
<div id="map" style="width:640px;height:480px"x/div> 

<!-- Chargement de l'API Google maps Q --> 

<script src="http://maps.google.com/maps/api/js?sensor=false"x/script> 

<script> 

if (navigator. geolocati on) { 

// Fonction de callback en cas de succes 
function succesCeo(position) { 

var infopos = "Position determined : <br>"; 
infopos += "Latitude : "+position. coords. latitude +"<br>"; 
infopos += "Longitude: "+position. coords. longitude+"<br>"; 
document. getElementById("maposition") .innerHTML = infopos; 

// On instancie un nouvel objet LatLng pour Google Maps 
var latlng = new google. maps. LatLng(position. coords. latitude, 
position. coords. longitude) ; 

// Ainsi que des options pour la carte, centree sur latlng Q 
var optionsGmaps = { 

mapTypeControl : false, 

center: latlng, 

navi gati onControlOpti ons : {styl e : googl e . maps . Navi gati onControl Styl e . SMALL} , 
mapTypeld : googl e . maps . MapTypeld . ROADMAP , 
zoom: 15 

}; 

// Initialisation de la carte avec les options Q 

var map = new google. maps. Map(document. getElementById("map") , optionsGmaps); 

// Ajout d'un marqueur a la position trouvee Q 
var marker = new google. maps. Marker({ 

position: latlng, 

map: map, 

title:"Vous etes ici" 

}); 

} 

// Requete de geolocalisation 

navi gator . geol ocati on . getCu r rentPosi ti on (succesGeo) ; 



} 

</script> 
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Apres chargement du fichier principal heberge par Google Q et invocation d'une 
carte ©, cette API prend place dans un element HTML <div> sur la page ©. Plu- 
sieurs fonctions JavaScript permettent de centrer la carte sur la position detectee © 
et d'y placer un symbole 0. 



Figure 9-8 

Resultat de la requete 



' | - .... - 




Pour etudier ce qui se deroule en coulisses, sachez que Firefox est muni de deux direc- 
tives de configuration accessibles via about :config (URL a taper dans la barre 
d'adresses). II s'agit de geo. enabled qui active ou desactive le processus; et 
geo.wifi .uri qui indique l'adresse interrogee dans le cas d'une methode par identifi- 
cation de reseaux (IP, Wi-Fi), il s'agit par defaut de https://www.google.com/loc/json. 



Prise en charge de FAPI Geolocation par les navigateurs 

Deux outils complementaires peuvent aider a 1 'implementation de la geolocalisation. Le 
premier est le framework geo-location-javascript, qui uniformise les appels de fonction sur 
plusieurs plates-formes (iPhone OS, Google Gears, BlackBerry webOS, Mozilla Geode, 
etc.). II s'agit d'un fichier JavaScript complementaire, possedant ses propres fonctions. 
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Tableau 9-5 Tableau de support de I'API Geolocation 



Navigateur 


Version 


Mozilla Firefox 


3.5+ 


Apple Safari 


5.0+ 


Google Chrome 


5.0+ (< 5.0 via Gears) 





Android 


2.0+ 


Opera 


10.6+ 


Internet Explorer 


9+ 



Rappel 

Consultez le site d'accompagnement pour des informations mises a jour ! 



Le deuxieme est Google Gears lui-meme, qui n'est plus maintenu, mais qui offre un 
support sur d'anciennes versions de navigateurs s'il est installe ainsi que naturelle- 
ment sur Google Chrome dans les versions anterieures a la 5.0. 



RESS0URCE Frameworks de geolocalisation : geo-location-javascript et API Google Gears 

► http://code.google.eom/p/geo-location-javascript/ 

► http://code.google.com/intl/fr/apis/gears/api_geolocation.html 

Notez que le developpement du framework de geolocalisation avec Google Gears est arrete. 



Alternative avec geo-location-javascript 

Geo-location-javascript a le merite de se conformer aux parametres de la specifica- 
tion du W3C pour les callbacks et les structures de donnees. Un resultat positif con- 
tiendra au moins les coordonnees de latitude et de longitude, ainsi qu'un timestamp. 

Exemple avec usage de geo-location-javascript 

<!-- Un element HTML pour recueillir 1'affichage --> 
<div id="mapos"ition"></div> 

<!-- http://code.google.eom/p/geo-location-javascript/ --> 
<script src="geo-location- javascript/geo. js"x/script> 

<scri pt> 

// Fonction de callback en cas de succes 
function succesGeo(posi ti on) { 

var infopos = "Position determines : <br>"; 

infopos += "Latitude : "+positi on. coords. latitude +"<br>"; 

infopos += "Longitude: "+positi on . coords . longi tude+"<br>" ; 

infopos += "Altitude : "+positi on . coords . al ti tude +"<br>"; 
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document. getElementById("maposition") .innerHTML = infopos; 

} 

// Fonction de callback en cas d'erreur 
function erreurGeo(error) { 

var info = "Erreur lors de la geolocalisation : "; 

info += error . message ; 

document. getElementById("maposition") -innerHTML = info; 

} 

// Initialisation du framework et geolocalisation 
i f(geo position js . init()) { 

document. getElementById("maposition") -innerHTML = "En cours..."; 

geo posi tion j s . getCur rentPosi tion (succesCeo , er reu rCeo) ; 
} else { 

alert("Ce navigateur ne supporte pas la geolocalisation"); 

} 

</scri pt> 

Avec cette methode, la librairie JavaScript n'est plus mise a disposition a une adresse 
publique, mais doit etre telechargee. Nonobstant l'initialisation, le reste du processus 
suit le meme deroulement. 

D'autres plates-formes possedent leurs propres API, gageons que I'unification de ces 
differentes implementations est sur la bonne voie : 



RESSOURCE Autres API non standardises : BlackBerry Browser, Palm, OMTP/Bondi et Symbian 

► http://www.tonybunce.com/2008/05/08/Blackberry-Browser-Amp-GPS.aspx 

► http://developer.palm.com/index.php?option=com_content&view=article&id=1673#GPS-getCurrentPosition 

► http://bondi.omtp.Org/1 .0/apis/geolocation.html 

► http://wiki.forum.nokia.com/index.php/Google_Maps_using_Location_Api_in_Symbian 
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(File API) 



Pour vitaminer les applications web, l'API File fournit des interfaces de 
lecture de fichiers et recourt a XMLHttpRequest pour les envois en Ajax au 
serveur. 




Figure 10-1 Fichiers a I'ancienne 



HTML 5 - Une reference pour le developpement web 

HTML 5 prevoit des interfaces de programmation puissantes pour interagir avec les 
fichiers, qu'ils soient binaires ou non. Cela represente une grande avancee en termes 
de possibilites offertes pour construire des applications a destination d'un public 
pouvant produire ou generer des donnees en ligne, voire en envoyer. 

Le Web n'a pas toujours eu tant d'affinites avec les systemes de fichiers, que ce soit en 
lecture ou en ecriture. Les exigences de securite furent un frein, a l'epoque ou Ton par- 
lait encore de cookies subtilises et de failles JavaScript. Les developpeurs avaient deja 
fort a faire avec d'autres precautions et avec l'intrusion du langage Java dans ce monde 
multi-plate-forme pour acceder au stockage de l'internaute. Pourtant, l'essor des appli- 
cations web a rendu necessaire l'elaboration d'une API d'interaction avec les fichiers. 

D'autres ameliorations sont en route pour accomplir toutes les actions familieres sur 
l'arborescence des fichiers : en lire le contenu sans faire intervenir un langage cote serveur 
ni une necessite d'envoi, l'analyser, creer de nouvelles donnees binaires, les enregistrer 
temporairement, les traiter, et agrementer l'envoi de fichiers par Drag & Drop ou la 
lecture de repertoires. 

RESSOURCE Specifications de I'API File 

File API 

► http://www.w3.org/TR/FileAPI/ 
FileWriter 

► http://www.w3.org/TR/file-writer-api/ 
File API : Directories and System 

► http://www.w3.org/TR/file-system-api/ 



Principe 

La specification W3C definit plusieurs interfaces pour la manipulation du systeme 
de fichiers : 

• File : pour acceder aux proprietes du fichier (nom, type, poids, emplacement) ; 

• FileList : pour representer une sequence de fichiers (selectionnes grace a l'element 
<input type="f-Me"> ou glisses-deposes depuis le systeme d'exploitation dans le 
navigateur) ; 

• Blob : pour acceder au contenu binaire brut d'un fichier (Binary Large Object) ; 

• FileReader : pour lire le contenu d'un fichier ou d'un objet Blob en memoire ; 

• FileWriter : pour ecrire un fichier ; 

• FileWriterSync : pour modifier un fichier de maniere synchro ne dans un Web 
Worker. ; 



422 



10 - Interactions avec les fichiers (File API) 



• FileSaver. pour sauver un Blob dans un fichier et en surveiller la progression ; 

• BlobBuilder : pour construire un Blob depuis une chaine de texte ; 

• FileError et FileException : pour gerer les erreurs et exceptions pouvant survenir ; 

• FileSystem : pour acceder au systeme de fichiers et a son arborescence. 

De surcroit, l'API ProgressEvents permet de renseigner sur la progression lors de l'envoi 
d'un fichier, et l'API Drag & Drop entre en jeu pour les phases de glisser-deposer. 

Toutes ces operations sont asynchrones, ce qui signifie que les fichiers peuvent etre 
charges et manipules en tache de fond pendant que l'utilisateur accomplit d'autres 
actions. Par ailleurs, ces interfaces sont utiles a la creation d'applications web qui 
fonctionnent hors connexion (en mode deconnecte). 



Figure 10-2 

Interfaces de manipulation 
de fichiers 




FileReader File FileSaver FileWriter FileWriterSync 




Blob 1 ' BlobBuilder 

FileList 



Fonctionnement 

La manipulation de fichier suppose dans la plupart des cas l'envoi ( upload) prealable 
ou la simple selection d'un ou plusieurs fichiers par l'utilisateur. 

Cela est realise grace a l'element input dont on precise le role via son attribut 
type="file". Un controle est alors affiche avec un champ complete d'un bouton 
« Parcourir... ». 

Entree de formulaire pour fichier 
<input type="file" name="monf i chi er"> 

Figure 10-3 

Un composant de formulaire pour fichier I | ~ Parcourir... | 

Nous ne nous interesserons pas a l'envoi d'un fichier qui sort du cadre du HTML 
pur et dur, et qui necessite un traitement grace a un langage interprets cote serveur 



423 



HTML 5 - Une reference pour le developpement web 

(PHP, Python, Ruby on Rails, etc.) ; il existe de nombreux guides sur le Web pour 
realiser cela et de nombreuses facons de proceder pour receptionner un fichier de la 
sorte avec toutes les verifications de securite que cela implique. 

En revanche, les API HTML 5 en relation avec les fielders vont permettre d'effectuer 
des operations avec une simple selection, declenchee par des evenements DOM et du 
JavaScript. Cette selection peut desormais porter sur un ensemble de plusieurs fichiers, 
grace a l'introduction de l'attribut mul ti pi e, qui peut aussi prendre la valeur true. 

Entree de formulaire pour fichiers multiples 

<input type="file" name="mesfichiers" multiple="true"> 

Un autre attribut nomme accept peut etre precise conjointement pour definir quel 
type MIME de fichier est accepte. En revanche, tres peu de navigateurs supportent 
vraiment bien cette verification de facon native. 

Entree de formulaire pour fichiers de type connu 

<input type="file" name="monfichier" accept="image/jpeg"> 

Un caractere joker sous forme d'asterisque en seconde partie de masque signifie que 
tout sous-type est accepte. Si Ton ne souhaite pas laisser une telle latitude, une liste 
de valeurs separees par des virgules peut aussi faire l'affaire. 

Entree de formulaire pour fichiers de type connu 

<input type="file" name="monfichier" accept="image/*"> 

<input type="file" name="monfichier" accept="i mage/ j peg, image/gif, image/png"> 

Evenement onchange 

Une fois le ou les fichiers selectionnes, I'evenement change de I'element input est 
declenche. II va permettre d'appeler un traitement specifique, soit une fonction 
JavaScript, en precisant que Ton souhaite exploiter la propriete f i 1 es de I'element ici 
designe par this (lui-meme). 

Attribut onchange sur input file 

<input type="file" name="mesfichiers" onchange="analyseFichiers(this. files)" 
multipl e> 

<script> 

function analyseFichiers(fichiers) { 
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// Faire quel que chose avec les fichiers... 
} 

</scri pt> 

II s'agira d'ecrire cette fonction (ici analyseFichiers) pour acceder aux informations 
relatives aux fichiers. 

L' association de I'evenement peut aussi etre effectuee dans le code JavaScript directe- 
ment grace a addEventLi stener() (ou attachEvent() sous Internet Explorer <9) et 
non au travers de l'attribut onchange : 

Gestionnaires d'evenements change 

<input type="file"name="mesfichiers" id="mesfichiers" multiple> 
<scri pt> 

var f input = document. getElementByld('mesfichiers') ; 
if (f input. addEventLi stener){ 

f input. addEventListenerC change ' , analyseFichiers, false); 
} else if (finput.attachEvent) { 

finput.attachEventC onchange' , analyseFichiers) ; 

} 

function analyseFichiers(event) { 

fichiers = event. target. files; 
// Faire quelque chose... 
} 

</scri pt> 

C'est alors la propriete target . f i 1 es de I'evenement qui entre en jeu. 

Recueillir les informations des fichiers selectionnes 

La structure de donnees recueillie en argument de la fonction comprend un tableau don- 
nant acces aux proprietes des fichiers nom (name ou fileName), taille en octets (size ou 
f i 1 eSi ze) et type MIME (type). II suffit alors de le parcourir pour lire ces informations. 

Affichage des proprietes de fichiers selectionnes 

<!— ... --> 

<input type="file" multiple name="mesfichiers" 
id="mesfichiers" onchange="analyseFichiers(this. files) ; "> 

<div id="infos"x/di v> 
<script> 

function analyseFichiers(fichiers) { 
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if (fichiers) { 

var infos = document. getElementByld('infos') ; 
var nombreFichiers = fichiers. length; 
var tailleTotale = 0; 

infos. innerHTML = "<p>Il y a <t»"+nombreFichiers+"</b> fichiers</p>"; 
infos. innerHTML += "<ul>"; 

for(i=0;i<nombreFichiers;i++){ 

infos. innerHTML += "<li>"+fichiers[i] .name+" ("+fichiers[i] .type+")</li>" ; 
tailleTotale += fichiers[i] .size; 

} 

infos. innerHTML += "</ul>"; 

infos. innerHTML += "<p>Total : <b>"+Math.round(tailleTotale/1024)+"</b> Kio 
</p>"; 

} 

} 

</script> 
<!-- ... — > 

Dans l'exemple ci-dessous : 

• L'evenement change declenche l'appel a la fonction analyseFichiers. 

• Celle-ci verifie la presence de la propriete f i 1 es. 

• Cette derniere est parcourue en tant que tableau de donnees par une boucle for, 
qui itere de a fichiers. length. 

• Pour chaque element (chaque fichier), on recueille les informations et on les con- 
catene a la propriete i nnerHTML du bloc portant l'identifiant i nfos. 

• En complement, les variables nombreFi chi ers et tai 1 1 eTotal e sont renseignees. 



Figure 10-4 

File API a I'oeuvre 
pour un input file 



File API 



Choisissez un fichier 2 fichiers 



II y a 2 fichiers 

* document.pdf (application/pdf) 

• photo.jpg (image/jpeg) 

Total : 221 Kio 



Lire des fichiers avec File Reader 

Pour aller plus loin qu'une simple lecture des proprietes des fichiers et exploiter leur 
contenu, il faut faire appel a FileReader. 
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Tableau 10-1 Apercu de FileReader 


Fonction 


Role 


readAsArrayBuf fer(bl ob) 


Renvoie le contenu au format ArrayBuffer. 


readAsBi naryStri ng(blob) 


Renvoie le contenu au format BinaryString. 


readAsText (bl ob , encodi ng) 


Renvoie le contenu au format texte (le parametre encoding est optionnel). 


readAsDataURL(blob) 


Renvoie le contenu au format DataURL. 



Cette interface comprend plusieurs methodes differentes selon le type de donnees attendu. 
La methode utilisee dans l'exemple suivant sera readAsDataURLO qui declenchera un eve- 
nement 1 oad lorsque la lecture du fichier sera complete et convertie au format DataURL. 
Ce dernier embarque des donnees encodees a l'interieur meme du code HTML. 



Lecture de fichiers locaux vers le format DataURL 

<!D0CTYPE htm"l> 
<html lang="fr"> 
<head> 

<meta charset="utf-8"> 

<title>HTML5 : File API (Fi 1 eReader)</ti tl e> 

<1 n nk rel="stylesheet" href="styles.css" type="text/css"> 

<style> 

img { 

posi ti on : absol ute ; 

background :whi te ; 

paddi ng : 20px; 

max-width:2 50px; 

/* Ombrage */ 

-moz-box-shadow: Opx Opx 20px #bbb; 
-webkit-box-shadow: Opx Opx 20px #bbb; 
box-shadow: Opx Opx 20px #bbb; 
/* Transitions */ 
transition: all Is ease-out; 
-moz-transition: all Is ease-out; 
-webkit-transition: all Is ease-out; 
-o-transition: all Is ease-out; 

} 

img: hover { 

/* Transformations au survol */ 

-webkit-transform: rotate(Odeg) scale(1.2) limportant; 
-moz-transform: rotate(Odeg) scale(1.2) limportant; 
-o-transform: rotate(Odeg) scale(1.2) limportant; 
-ms-transform: rotate(Odeg) scale(1.2) limportant; 
transform: rotate(Odeg) scale(1.2) limportant; 

} 

</style> 

</head> 

<body> 
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<div class="wrap"> 

<pxstrong>Fi le API (FileReader)</strongx/p> 
<input type="file" multiple name="mesfichiers" id="mesfichiers" 
onchange="analyseFichiers(thi s .files) ; "> 

</di v> 

<script> 

function analyseFichiers(fichiers) { 
if (fichiers) { 
f or(i =0 ; i <f i chi ers . 1 ength ; i ++) { 

// Si le fichier est de type image 

// ... et que FileReader est disponible Q 

if (fichiers[i] .type.matchC image.- ') && (typeof window. FileReader !== 
'undefined')) { 

// Nouvelle instance de FileReader 
reader = new FileReaderO ; 

// Cestion de l'evenement load 
reader . onl oad = function (event) { 

// Ajout en tant qu'image 

var itng = document. createElement('img') ; 

img.src = event. target. result; 

// Ajout dans le DOM 

document . body . parentNode . i nsertBefore(i mg , document . body . nextSi bl i ng) ; 
// Modification du style a la volee 

img. style. top = Math . round (Math . random() *wi ndow.i nnerHeight/2)+"px" ; 
img. style. left = Math . round (Math . random ()*wi ndow. i nnerWidth/2)+"px" ; 

// Rotation aleatoire 

var rotation = Math . round (Math . random() --'40-20) ; 
img. style. webkitTransform = "rotate("+rotation+"deg)" ; 
img. style. OTransform = "rotate("+rotation+"deg)" ; 
img. style. msTransform = "rotate("+rotation+"deg)"; 
img. style. MozTransform = "rotate("+rotation+"deg)" ; 
img. style. transform = "rotate("+rotation+"deg)" ; 

}; 

// Lancement de FileReader pour le fichier 
reader . readAsDataURL(f i chi ers [i ] ) ; 

} 
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} 

</scri pt> 
</html> 

L'iteration sur la liste de fichiers obtenue provoque pour chaque fichier de type 
image Q la creation d'un objet FineReader Q. Etant donne que l'evenement load est 
declenche a la fin de la lecture, il faut declarer un gestionnaire d'evenement ©, 
recueillant l'objet et traitant sa propriete target . resul t. Celle-ci contient les donnees 
au format DataURL qui sont assignees a l'attribut src de l'image creee dynamique- 
ment O- A l'insertion dans le DOM, l'image apparait avec son contenu 0. 

Pour le cote esthetique, l'image est positionnee a des coordonnees aleatoires determi- 
ners d'apres les dimensions de la fenetre active ©. Une rotation lui est ensuite appli- 
quee Q grace a la propriete CSS transform qui accepte une valeur en degres, elle 
aussi determinee aleatoirement en JavaScript avec la fonction Math . random (). 

transform: rotate (Xdeg) ; 

Plusieurs navigateurs supportant ces fonctions experimentales avec un prefixe, le 
script utilise jusqu'a cinq proprietes differentes de styl e pour appliquer la rotation. 

Apres ce gestionnaire d'evenement, il ne faut pas oublier de lancer la lecture avec la 
methode readAsDataURL () , recevant en argument le fichier sur lequel la boucle a itere ©. 



Figure 10-5 

Affichage des images 



File API (FileReader) 

ChooEe Files 4 fichiefS 




L'apparence finale est determinee par les styles appliques individuellement en JavaScript a 
chaque image (une valeur de rotation et une position differentes) ainsi qu'au niveau global 
(ceux presents dans la balise <styl e>). Au survol avec la souris, une transition CSS est 
declenchee pour agrandir legerement l'image et la redresser avec une rotation nulle. 
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En resume, l'essentiel de Faction de FileReader se joue en trois etapes : 

1 La declaration d'un nouvel objet FileReader. 

2 Lecriture du gestionnaire d'evenement onload, avec l'exploitation du resultat 
stocke dans les proprietes de cet evenement. 

3 L'appel effectif de la methode de lecture, au choix parmi celles offertes. 

Lecture au format DataURL avec FileReader 

var reader = new Fi 1 eReaderO ; 
reader . onl oad = function(event) { 

event . target . resul t ; // donnees DataURL 

} 

reader . readAsDataURL(fi chi er) ; 

Pour une lecture au format texte, d'un fichier texte simple ou par exemple d'un autre 
document HTML, la methode readAsTextO suitle meme principe. 

Lecture au format texte avec FileReader 

var reader = new Fi 1 eReaderO ; 
reader. onl oad = function(e) { 

event . target . resul t ; // donnees texte 

} 

reader . readAsText(f"i chi er) ; 

Utiliser Canvas 

Pourquoi ne pas profiter de Canvas pour effectuer des traitements sur les images 
ainsi importees ? Apres creation de I'element <i mg>, une insertion dans un element 
<canvas> coule de source avec la fonction drawlmage(). 

Dessin d'images importees dans canvas 

<!-- ... --> 

<div cl ass="wrap"> 

<pxstrong>Fi 1 e API (Canvas)</strongx/p> 

<input type="file" multiple name="mesfi chi ers" i d="mesf i chi ers" 
onchange="analyseFichiers(this. files) ; "> 

<canvas width="400" height="300" id="dessin"x/canvas> 

</di v> 

<scri pt> 

var canvas = document .getElementById( 'dessin') ; 
var ctx = canvas. getContextC 2d') ; 
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function analyseFichiers(fichiers) { 
i f (f i chi ers) { 

f or (i =0 ; i <f i chi ers . 1 ength ; i ++) { 

i f(fi chi ers [i ]. type . match( ' i mage ) && (typeof wi ndow. Fi 1 eReader 
!== 'undefined')) { 

reader = new FileReaderO ; 

reader. onload = function (event) { 

// Creation de 1 'image 

var img = document. createElement('img') ; 

img.src = event. target. result; 

// Insertion aleatoire dans canvas 
var x = Math. random()"(canvas.width-img. width) ; 
var y = Math . randomO* (canvas . hei ght-i mg . hei ght) ; 
ctx.drawlmage(img,x,y) ; 

}; 

reader . readAsDataURL(fi chi ers [i ] ) ; 

} 

} 

} 

} 

</scri pt> 
<!-- ... — > 

A la suite de quoi, il est possible d'utiliser toutes les autres fonctions de dessin et de 
manipulation d'images. Reportez-vous au chapitre 8 pour les decouvrir. 

Figure 10-6 File API (Canvas) 

Dessin de 1 3 images Ch °- Film 1 3 fichiers 




Canvas n'est pas uniquement un point d'entree, les graphismes ainsi generes sont 
« exportables » par des methodes accessibles depuis l'objet de canvas. Le premier 
format supporte est DataURL avec la fonction toDataURLO qui recoit en argument 
le type de donnees souhaite pour l'encodage data: . 

var dataurl = canvas. toDataURL("i mage/png") ; 
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La seconde possibilite est plus ambitieuse, avec la methode toBlobO qui a pour role 
de produire un type Blob, c'est-a-dire des donnees binaires. 

function call back(event) { 
// event . . . 

} 

canvas . toBlob(cal 1 back, "image/png") ; 

Cette procedure etant asynchrone, c'est la aussi une fonction de callback qui recoit les 
donnees dans l'objet evenement genere. A partir de cet instant, l'objet Blob peut etre 
exporte vers un fichier avec l'API FileWriter, voire envoye directement vers un ser- 
veur en Ajax avec XMLHttpRequest. 

Au moment des derniers developpements, cette fonction reste malheureusement rare, mais il est a parier 
que son uti lite va la democratiser rapidement. 



Libraries Alternatives par Eli Grey 

Quelques alternatives JavaScript pour FileAPI et Canvas 

► https://github.com/eligrey/canvas-toBlob.js 

► https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js 

► https://github.com/eligrey/BlobBuilder.js 



CreateObjectURL 

Une alternative a FileReader et DataURL consiste a se tourner vers le format Object- 
URL. C'est l'interface wi ndow. URL (ou window, webki tURL pour la version experimen- 
tale prefixee avec le moteur Web Kit) qui comprend la methode createObjectURLO 
pour la conversion directe depuis un fichier. 

Utilisation de CreateObjectURL 

var img = document. createElement('img') ; 
// Version universelle 

if (window. URL && typeof wi ndow. URL . CreateObjectURL !==' undefi ned ' ) { 
img.src = window. URL. createObjectURL(f i chi ers [i ] ) ; 

// Version webki t 

} else if (window. webki tURL && typeof 

wi ndow. webki tURL . createObjectURL!==' undefi ned ' ) { 

img.src = window. webkitURL. createObjectURL(f i chi ers [i ] ) ; 

} 



Compatibility 

Cette fonction n'est cependant pas supportee du cote d'Opera jusqu'a la version 1 1 .5 incluse, ni du cote 
d'lnternet Explorer jusqu'a la version 9. 
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Upload simple avec PHP 

La prise en charge de l'envoi de fichiers vers le serveur {upload) est une composante 
frequente dans les applications web. Avec le langage PHP, un envoi au travers d'un 
formulaire HTML valide est aise. Quelques notions sont a retenir : 

• Le formulaire doit etre equipe de rattribut enctype="multi part/form-data", sans 
oublier de bien indiquer l'adresse du script de prise en charge dans rattribut acti on. 

• PHP stocke les informations sur les fichiers dans le tableau $_FILES. 

• Les fichiers sont temporairement ecrits dans un repertoire temporaire du serveur 
web et doivent etre deplaces avec la fonction move_upl oadecLf i 1 e() de PHP vers 
le repertoire de destination. 

Document HTML d'envoi 

<!D0CTYPE htm"l> 
<html lang="fr"> 
<head> 

<meta charset="utf-8"> 

<title>HTML5 : File API (Upload) </title> 

<link rel="stylesheet" href="styles.css" type="text/css"> 

</head> 

<body> 

<div cl ass="wrap"> 

<form i d="formul ai re" method="post" 
action="upload.php"enctype="mul tipart/form-data"> 

<pxstrong>Fi 1 e API (Upl oad)</strongx/p> 

<input type="f"ile" multiple name="mesfichiers[]" "i d="mesf i chi ers"> 
<input type="subm"i t" val ue="Envoyer"> 
</form> 

</di v> 

</body> 

</html> 

Les navigateurs modernes autoriseront l'envoi de multiples fichiers grace a l'attribut 
multiple. C'est pourquoi il sera necessaire de suffixer le champ de formulaire par [] 
et d'iterer ensuite en PHP sur le tableau obtenu. 



433 



HTML 5 - Une reference pour le developpement web 



Fichier PHP (upload.php) 

<?php 

if(isset($_FILES) && i s_array ($_FILES)) { 
// Nombre de fichiers envoyes 
$nb = count ($_FILES [' mesfi chi ers '][' name ']) ; 
// Chemin destination (repertoire courant + /upload/) 
$dir = real path ('.'). '/upload/' ; 
if($nb>0) { 

for($i=0; $i<$nb; $i++) { 

echo '<p>Fichier : ' .$ FILES['mesfichiers'] ['name'] [$i] ; 
echo '<br>Taille : ' .$_FILES['mesfichiers'] ['size'] [$i] ; 
echo '<br>Type : ' . $ FILES[ 'mesf ichiers ' ] [' type'] [$i] ; 

// Copie depuis le repertoire temporal' re 
$copie = 

move uploaded file($ FILES [' mesfi chi ers'] ['tmp_name'] [$i] , 
$upl oaddi r . $_FILES [ ' mesfi chi ers ' ] [ ' name ' ] [$i ] ) ; 

if($copie) echo ' <brxb>Fi chi er copi e</bx/p> ' ; else echo 
'<brxb>Erreur de copi e</bx/p> ' ; 

} 

} else { 

echo 'Aucun fichier envoye'; 

} 

} 

?> 

Cet exemple reste volontairement minimaliste. II vous appartient absolument de prendre 
toutes les mesures necessaires en matiere de securite, selon la vocation de l'application et 
des fichiers envoyes. Des verifications sur le nom du fichier copie (sa longueur, son exten- 
sion, les caracteres autorises), sur sa taille et sur son type sont obligatoires pour ne pas 
ecoper de fichiers malicieux pouvant mettre a mal l'integrite du site. La cerise sur le 
gateau : ne pas oublier de donner les droits d'ecriture au repertoire de destination. 

Upload avec XMLHttpRequest 2 

Ajax utilise une technologie construite autour de l'objet XMLHttpRequest. C'est ce 
« module » particulier de JavaScript dont sont equipes tous les navigateurs recents 
qui autorise le dialogue avec un serveur HTTP sans devoir recharger completement 
une page. Des donnees peuvent etre envoyees et recues, par une requete POST ou 
GET, ce qui a permis l'essor d'un grand nombre d'applications web tres celebres. 
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A l'initiative de Microsoft pour Internet Explorer 5 {XMLHttp en ActiveX), cet 
outil a vite prouve son utilite et a conquis les autres navigateurs sous des formes 
approchantes. En 2006, il s'est vu proposer le statut de recommandation du W3C. 
Prevu initialement pour faire transiter du XML, ainsi que son nom l'indique, rien 
n'empeche de l'utiliser avec des formats textes varies ainsi que JSON et HTML lui- 
meme. Des ameliorations ont ete pensees pour simplifier son usage, lisser les diffe- 
rences d'implementation et le rendre plus puissant avec des transferts de donnees 
binaires, dans ce qui a ete baptise « XMLHttpRequest Level 2 ». 



Ressource Specifications XMLHttpRequest 

W3C Working Draft XMLHttpRequest Level 2 

► http://www.w3.org/TR/XMLHttpRequest2/ 
W3C Editor's Draft XMLHttpRequest Level 2 

► http://dev.w3.org/2006/webapi/XMLHttpRequest-2/ 
Recommandation candidate W3C « Level 1 » 

► http://www.w3.org/TR/XMLHttpRequest/ 



Cote serveur, le script PHP ecrit pour un envoi classique avec validation de formu- 
laire reste le meme. II n'est pas besoin de le modifier, a moins de vouloir envoyer des 
informations (texte ou HTML) differentes au retour de la requete Ajax. 

Cote navigateur, le formulaire prepare dans l'exemple precedent (voir Document 
HTML d'envoi) est toujours d'actualite. II se voit en revanche complete : 

• par un script initialisant un nouvel objet XMLHttpRequest et prenant le pas sur la 
methode d'envoi classique ; 

• par l'utilisation de FormData ; 

• par un element <output> (facultatif ) devant afficher le retour du serveur ; 

• par un element <progress> affichant l'avancement de l'envoi. 

Document HTML d'envoi 

<!D0CTYPE htm"l> 
<html lang="fr"> 
<head> 

<meta charset="utf-8"> 

<title>HTML5 : File API (Upload XHR2)</ti tl e> 

<1 n nk reWstylesheet" href="styles.css" type="text/css"> 

</head> 

<body> 

<div cl ass="wrap"> 
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<form i d="formul ai re" method="post" acti on="upl oad . php" 
enctype="mul ti part/form-data"> 

<pxstrong>Fi 1 e API (Upload)</strongx/p> 

<input type="file" multiple name="mesf i chi ers [] " i d="mesf i chi ers"> 
<input type="submi t" val ue="Envoyer"> 
</form> 

<progress id="avancement" min="0" max="100" aria-val uemin="0" aria- 
val uemax=" 100"></progress> 
<output id="infos"> </output> 

</di v> 

<scn'pt> 

// ... Script d'envoi (ci-apres) 
</scri pt> 

</body> 

</html> 



FormData 

L'API FormData fait partie de la specification XMLHttpRequest 2. Elle sera mise a 
contribution pour le « packaging » des donnees a envoyer, car elle contribue grande- 
ment a sa simplification. 

Son role est de creer dynamiquement un objet regroupant des donnees de formulaire, 
a partir de sources variees, fussent-elles presentes sur la page dans un formulaire 
HTML ou non. Le tout est structure en paires de cles/valeurs, ajoutees par la 
methode append (). 

Exemple d'envoi FormData via XMLHttpRequest 

// Creation de 1 'objet FormData 
var fd = new FormDataO ; 

// Ajout de donnees 

formData. append("pseudo" , "Okko") ; 

formData.append("kiwiz" , 1664) ; 

// Creation d'un objet XMLHttpRequest 
var xhr = new XMLHttpRequestO ; 
xhr .open ("POST" , "i nscri pti on . php") ; 

// Envoi de FormData par XMLHttpRequest 
xhr . send(fd) ; 



436 



10 - Interactions avec les fichiers (File API) 



Cette facon de proceder est d'une grande souplesse, d'autant plus que la methode append () 
accepte des fichiers File, issus d'un <i nput type="f i 1 e"> ou de Drag &Drop. 

Script pour envoi de fichiers avec FormData et XMLHttpRequest 

<scri pt> 

var formulaire = document . getEl ementById( ' formul ai re ' ) ; 
var progression = document. getElementByldC avancement ') ; 
var infos = document. getElementByldC infos') ; 

formul ai re . onsubmi t = function(event) { 

// Deactivation du comportement par defaut du formulaire Q 
event. preventDefault() ; 

// Di sponi bi 1 i te de FormData ? Q 
i f(wi ndow. FormData) { 

var fd = new FormDataO ; 
} else { 

alert("FormData non supporte") ; 

return ; 

} 

// Initialisation Ajax 

var xhr = new XMLHttpRequest () ; 

// Parametres globaux de la requete 

// formulai re.getAttribute("action") = "upload. php" 

xhr.open("POST" , formul ai re . getAttri bute("acti on") , true); 

// Au changement de statut 
xhr.onreadystatechange = function(event) { 
if (this. readyState === 4) { 

// Affichage du retour texte de la requete 

i nfos . i nnerHTML += event . target . responseText ; 

} 

}; 

// Durant la progression... 
xhr . onprogress = function(event) { 
i f (event . 1 engthComputabl e) { 

var pourcentage = Math. round(event.loaded*100/event. total) ; 

// i nfos . i nnerHTML += pourcentage. toString()+'%<br>' ; 

progression . setAttri bute("ari a-val uenow" , pourcentage) ; 

progression. value = pourcentage; 

} 

}; 
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// A la fin du chargement © 
xhr. onload = function(event) { 

i nfos . i nnerHTML += '<p style="color:green">Chargement termi ne<p> ' ; 

}; 

// En cas d'erreur © 
xhr.onerror = function(event) { 

i nfos . i nnerHTML += '<p style="color: red">Erreur<p>' ; 

}; 

// En cas d' annul ati on © 
xhr.onabort = function(event) { 

i nfos . i nnerHTML += '<p style="color:orange">Annulation<p>' ; 

}; 

// Liste des fichiers a envoyer © 

var i nputfi chi ers = document. getElementByld('mesfichiers') ; 
var fichiers = i nputfi chi ers . fi 1 es ; 

// Pour chaque fichier 
for(i=0;i<fichiers.length;i++) { 

i nfos . i nnerHTML += "Envoi de "+f i chi ers [i ] . name+" . . . <br>" ; 

// Ajout a FormData © 

// i nputfi chi ers . name = "mesf i chi ers [] " 

f d . append (i nputfi chi ers . name , fichiers [i ] ) ; 

} 

// Envoi des donnees © 
xhr .send(fd) ; 

}; 

</scri pt> 

Considerant un envoi avec Ajax sans valider le formulaire en HTTP, il est necessaire 
de desactiver Taction par defaut, qui survient sur l'evenement submi t ©. Suite a quoi 
le script peut prendre le relais pour initialiser les deux objets qui vont lui etre utiles : 
FormData pour les donnees © et XMLHttpRequest pour les envoyer ©. La methode 
d'envoi choisie est POST, pour laquelle l'adresse doit etre precisee © (ici directement 
lue dans l'attribut action du formulaire). 

Plusieurs gestionnaires d'evenements sont definis pour l'objet XMLHttpRequest afin 
de suivre de pres son statut. La reponse du serveur formulee par PHP est affichee 
dans l'element <output> ©, tandis que l'avancement de l'envoi est pris en compte 
par <progress> © grace a l'utilisation d'evenements de progression Progress Events. 
Les evenements load, error et abort sont interceptes au besoin © pour afficher un 
message informatif. 
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La phase de constitution des donnees debute avec la recuperation de la liste des 
fichiers de i'element <input type="file">, pour laquelle une iteration precede aux 
ajouts successifs a l'objet FormData 0, avec la cle lue dans l'attribut name du champ. 
Une fois tous ces preparatifs accomplis, il ne reste plus qua envoyer l'objet (et toutes 
les donnees qu'il contient) avec la methode sendQ de l'interface XMLHttp Request. 



Figure 10-7 

Resultat de I'upload 



File API (Upload) 

choose Files 1 4 fichiers 
Envoyer 



Envoi de photol .jpg... 
Envoi de photo2.jpg... 
Envoi de photo3.jpg... 
Envoi de photo4.jpg... 

Reception de photol jpg 
Taille : 5160 octets 
Type : image/jpeg 
Fichier copie 

Reception de photo2.jpg 
Taille : 17625 octets 
Type : image/jpeg 
Fichier copie 

Reception de photo3.jpg 
Taille : 8710 octets 
Type : image/jpeg 
Fichier copie 

Reception de photo4.jpg 
Taille : 7466 octets 
Type : image/jpeg 
Fichier copie 

Chargement termine 



Une amelioration possible est l'affichage des images envoyees, soit via le serveur, soit 
cote client avec les fonctions offertes par FileReader. 

La prise en charge de FormData (XMLHttpRequest 2) se fait a partir de Firefox 4+, 
Chrome 6+, Safari 5+, IE 10+, Android 3+. En revanche, Internet Explorer jusqu'a 
la version 9 et Opera jusqu'a la version 11.5 ne comprennent pas cette API. Des 
alternatives tres proches peuvent etre construites avec jQuery et la methode $ . ajax() 
pour offrir une meilleure retrocompatibilite. 



Drag & Drop 

La selection de fichiers au travers d'un objet FileList n'est pas limitee au seul element 
<input type="file">. Elle peut etre obtenue par glisser-deposer dans le navigateur, 
notamment depuis le systeme d'exploitation (voir le chapitre consacre au glisser-deposer). 
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Et bientot, ecrire des fichicrs, acceder au systeme 

HTML 5 est promis a de grands exploits en matiere de fichiers avec les interfaces 
elaborees autour du noyau principal de File API. 

Pour creer des fichiers a partir de zero, BlobBuilder et FileSaver sont de mise. Pour le 
premier, il s'agit de construire des donnees avec en entree des types Blob, DOMString 
ou ArrayBuffer, tandis que le second ecrit le tout dans un fichier. 

Pour passer a un niveau superieur et acceder a l'arborescence du systeme de dossiers et 
de fichiers, les interfaces DirectoryReader, FileEntry, Directory En fry, et LocalFileSystem, 
sont toutes indiquees. Deplacement, copie, suppression, ecriture, creation de dossiers, 
listing de contenus de dossiers, les applications web vont s'en donner a cceur joie. 

Les consequences en matiere de securite seront nombreuses. Le tout sera heureuse- 
ment execute dans une sandbox, une partie protegee et limitee du disque dur utilisateur. 

Au moment des tests realises, cet ensemble n'est disponible qua partir de Chrome 9 
partiellement, et Chrome 13 de facon plus complete, avec le parametre d'execution - 
unlimited-quota-for-files. Ces contraintes ne permettent pas (encore) de pro- 
poser de methodes perennes dans ce chapitre. Reportez-vous a la specification pour 
effectuer des experimentations. 

Prise en charge 

Tableau 10-2 Tableau de support de I'API 



Navigateur 


File API 


FileReader 


FileWriter 


Blobs 


Mozilla Firefox 


3.6+ (partiel) 


3.6+ 




4+ 


Apple Safari 


4.0+ (partiel) 


6+ 






Google Chrome 


5+ (partiel) 
13+ 


7+ 


8+ (partiel) 
13+ 


8+ 


Opera 


11.1+ (partiel) 


11.1 + 






Opera Mobile 


11.1+ (partiel) 


11.1 + 






Android 


3+ (partiel) 


3+ 






Internet Explorer 


1 0+ (partiel) 


10+ 






iOS, Opera Mini 











Rappel 

Reportez-vous au site d'accompagnement de I'ouvrage pour des informations de prise en charge mises a jour. 
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Gestion du glisser-deposer 
(Drag & Drop) 



La possibilite de glisser et deposer des elements a la souris est l'une des 
avancees les plus notables en termes d'interfaces graphiques. Portee pour le 
Web, elle fait appel aux evenements, aux attributs draggable et dropzone, 
et a l'interface DataTransfer. 




Figure 11-1 Outil pour soulever et deposer (mais pas pour draguer) 



HTML 5 - Une reference pour le developpement web 



Le glisser-deposer n'est pas recent dans le monde informatique. II a pu voir le jour des la 
naissance des interfaces graphiques et des dispositifs de pointage. Ayons a ce moment 
une pensee emue pour la premiere souris en bois, et une autre pour les souris a boule. 

Les systemes d'exploitation integrent cette « gestuelle » pour simplifier les taches a 
l'utilisateur et faciliter leur comprehension visuellement. Tout un chacun s'en sert 
pour glisser des icones de fichiers et les copier, les deposer dans la corbeille afin de les 
supprimer, voire sur une autre icone d'application pour les y ouvrir. Les exemples 
sont nombreux et relativement intuitifs en regie generate. 

Le Web a longtemps ete refractaire a ce type de comportement, car il met en jeu a la 
fois la notion de presentation (de quelle facon doit-on le symboliser), le cote carac- 
tere dynamique (qu'est-ce qui doit etre glisse, comment peut-on le deposer), et la 
contrainte du type de media qui doit etre depose (en termes de securite notamment, 
de finalite de Faction, et d'harmonisation des plates-formes). 

Les navigateurs ont par contre implemente des operations de drag & drop (DnD) sur 
le contenu meme des pages afin de pouvoir copier des zones de texte, des liens ou des 
images vers des programmes ou des dossiers sur le disque dur. II est aise de recuperer 
une image depuis le Web et de la deplacer sur le bureau de l'environnement utilisa- 
teur, mais pas l'inverse, du moins pas sans HTML 5. 

Plusieurs frameworks JavaScript sont venus a la rescousse, sans pour autant unifier le 
glisser-deposer ni le simplifier, conservant toujours les inconvenients de devoir se les 
approprier, et de devoir les charger. Avec HTML 5, on dispose d'une API native 
bien plus performante qui ne necessite aucune surcouche. 

Compatibility 

Au moment de la redaction de cet ouvrage, cette API n'est pas supportee par Opera 11.5, reste incom- 
plete pour Internet Explorer 9 mais beneficie d'un support plus complet pour Internet Explorer 1 0. 



Principe 

Le drag & drop introduit par HTML 5 repose sur trois fondamentaux a definir par 
le developpeur-integrateur : 

• Quel element peut etre glisse : en lui affectant l'attribut draggable. 

• Quel est F element qui sert de cible et de reception des informations : en lui affec- 
tant l'attribut dropzone et en lui attachant des evenements DOM pour savoir pre- 
cisement lorsqu'un element la survole ou s'y voit depose. 

• Quel est le comportement dynamique a associer : avec JavaScript et les gestion- 
naires d'evenements, Faction appropriee doit etre declenchee. 
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Figure 11-2 


Provenance 




Destination 


Glisser-deposer 




























l 
i 
i 
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Toutes ces etapes doivent etre prises en compte de facon harmonieuse pour que 
l'ensemble du processus se deroule dans les meilleures conditions. Fort heureusement, 
les outils imagines par les redacteurs des specifications HTML 5 sont bien adaptes. 

Ressource Specification du Drag & Drop du cote du WhatWG et du W3C 

► http://www.whatwg.org/specs/web-apps/current-work/cornplete/dnd.html 

► http://www.w3.org/TR/html5/dnd.html 



Evenements et attributs mis en oeuvre 

Pour accomplir ces etapes, il est necessaire de faire appel au DOM et a JavaScript. 
Afin de suivre et gerer les differentes etapes du glisser-deposer, plusieurs evenements 
DOM sont disponibles. 



Tableau 11-1 Evenements DOM pour le Drag & Drop 



Evenement 


Role 


dragstart 


Debut du deplacement (glisser). 


drag 


En cours de deplacement. 


dragend 


Fin de deplacement. 


dragenter 


Entree dans la cible. 


dragover 


En cours de survol de la cible. 


dragleave 


Sortie de la cible. 


drop 


Action de deposer. 



L'usage de l'ensemble de cette liste d'evenements n'est pas strictement necessaire. 
Certains peuvent avant tout jouer un role d'agrement visuel sur la zone de reception 
(dragenter, dragover, dragleave). D'autres doivent absolument etre pris en compte 
dans le processus de transfert d'informations. 
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II y a pour cela plusieurs notions a connaitre : 

• drag est declenche continuellement lorsque l'element draggable est deplace (que 
le pointeur soit en mouvement ou non). 

• dragover est declenche continuellement lorsque l'element draggable est main- 
tenu au-dessus de la cible, et son comportement par defaut doit etre desactive 
pour signifier au navigateur qu'il est possible de deposer « dans » l'element survole 
- de facon semblable pour dragenter sous Internet Explorer. 

• La specification prevoit l'attribut dropzone pour l'element devant recevoir I'eve- 
nement drop. 

• Tous les navigateurs ne supportent pas ces fonctionnalites natives de la meme 
facon, notamment Internet Explorer. 

Pour la gestion de ces evenements, les exemples suivants feront un usage des attributs 
HTML eponymes, c'est-a-dire ondrop="fonction()" pour I'evenement drop, 
ondragstart="autrefonctionO " pour I'evenement dragstart, et ainsi de suite. II 
est tout a fait possible de se servir des methodes plus souples addEventLi stenerO et 
attachEventO (IE <9) pour separer totalement le code JavaScript du code HTML, 
cependant le resultat est un peu plus verbeux et moins lisible. 

Glisser... 

L'attribut draggable 

Donner la faculte a un element HTML d'etre deplace est rapide. II suffit de lui 
ajouter l'attribut draggable, de preference avec la valeur true bien que la seule pre- 
sence de l'attribut soit suffisante. A peu pres tous les types d'elements sont con- 
cernes. Par defaut, les images (img) et les liens (a avec l'attribut href) sont deja 
« draggables » dans la plupart des moteurs de rendu. 

Exemples d'elements a qui Ton affecte l'attribut draggable 

// Une image 

<img src="kangourou. jpg" al t="Kangourou" draggabl e="true"> 

// Des elements de liste 
<ul> 

<li draggable="true">Je suns le premier</section> 
<li draggabl e="true">Je suns le second</secti on> 
</ul> 

// Une section 

<section cl ass="quel conque" draggabl e="true"> ... </secti on> 
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Cela fait, il reste un inconvenient de taille : si ces elements peuvent bien etre 
deplaces, rien n'est encore prevu pour les deposer. 

Un zeste de CSS 

En general, le glisser-deposer etant tres visuel, il est tout a fait indique de se servir 
des feuilles de style en tant qu'agrement graphique : 

• pour symboliser le caractere « draggable » d'un element, par exemple avec la 
modification de l'apparence du curseur via la propriete cursor: move ; 

• pour symboliser la zone sur laquelle ce dernier peut etre depose, par exemple avec 
une couleur de fond via background ou une bordure specifique via border ; 

• pour dimensionner cette cible, par exemple avec width et height ; 

• pour symboliser le survol actif de cette zone. 

Une astuce complementaire avec CSS consiste a empecher la selection du texte des 
elements que Ton souhaite deplacer a la souris. Cette finalite est atteinte en appli- 
quant la valeur none a user-select pour tous les elements auxquels l'attribut 
draggable a ete applique avec la valeur true, c'est-a-dire grace au selecteur d'attribut 
[draggable=true]. II faut aussi la decliner a l'aide des prefixes vendeurs -moz, - 
khtml et -webki t pour la voir acceptee sur les moteurs correspondants. 

Ajout a la feuille de style CSS pour prevenir la selection de texte 

[draggabl e=true] { 
-moz-user-sel ect : none; 
-khtml -user-sel ect : none; 
-webki t-user-sel ect : none; 
user-select: none; 
cursor : move; 
} 

La page suivante comprend trois images, un (tres modeste) paragraphe de texte et un 
element <div> en tant que zone d'atterrissage. 

Code HTML et CSS 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<meta charset="utf-8"> 

<title>HTML5 : Drag and Drop !</title> 

<link rel="stylesheet" href="styles.css" type="text/css"> 
<style> 

[draggabl e=true] { 

-moz-user-sel ect : none; 
-khtml -user-sel ect : none; 



445 



HTML 5 - Une reference pour le developpement web 



-webki t-user-sel ect : none; 
user-select: none; 
cursor : move ; 

} 

[draggabl e=false] { 
cursor : no-drop ; 

} 

p[draggable] { 

display: inline- block; 
verti cal -al i gn : top ; 
hei ght : 55px ; 
background:#A9C832; 
paddi ng : lOpx ; 
margi n : ; 
col or :whi te ; 
min-width: 55px; 

} 

#drop { 

height: 200px; 
width: 90%; 

border: 3px dashed #bbb; 
padding: lem; 
margi n-bottom: lem; 

} 

#drop: hover { 

background : #e0e6e9 ; 

} 

.deposezmoi { 
background : #b5e766 ; 
border: 3px dashed #79a633; 

} 

</styl e> 

</head> 

<body> 

<div cl ass="wrap"> 

<pxstrong>Cl i sser . . . </strongx/p> 

<img src="photol. jpg" alt="" draggabl e="true"> 
<img src="photo2 . jpg" alt="" draggabl e="true"> 
<img src="photo3. jpg" alt=""> 
<p draggabl e="true">Texte</p> 
<pxstrong>Deposer . . . </strongx/p> 
<div id="drop"x/di v> 

</di v> 

<script> 

// Gestion du drag & drop... 
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</scri pt> 

</body> 

</htm1> 

Le selecteur CSS [draggabl e=true] cible tous les elements possedant un attribut 
draggabl e avec la valeur true, et leur confere un curseur approprie au emplacement. A 
l'inverse, [draggabl e=false] en profite pour appliquer un curseur dissuasif. Le selec- 
teur CSS p [d raggabl e] cible tout le paragraphe possedant un attribut d raggabl e pour 
lui donner un style quelque peu ressemblant aux images qui le cotoient. 

Du cote HTML, les images <img> et le paragraphe <p> possedant 1' attribut draggable 
sont deplacables sur le document. Limage sans cet attribut est laissee a la libre apprecia- 
tion du navigateur, qui choisit en general de la rendre egalement deplacable par defaut. 




Pour le moment, ce resultat n'est qu'apparence : aucune action particuliere n'est 
declenchee suite au depot de Fun des elements dans la zone de destination, car le 
<script> nest pas ecrit. 



Deposer ! 

Le depot consiste a : 

1 Definir quelle zone du document HTML est en mesure de recevoir un element 
glisse, en lui ajoutant un attribut dropzone. 

2 Prendre en charge l'evenement drop genere par cette action. 

3 Savoir quelle information Ton souhaite vraiment retirer de l'element depose : un 
texte, une image, un lien, un ensemble d'elements, un fichier, etc. 
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L'attribut dropzone 

La valeur de l'attribut dropzone definit : 

• quel format de donnees est accepte ; 

• quelle indication est fournie a I'utilisateur sur la consequence du depot : s'agira-t- 
il d'un deplacement, d'une copie ou d'un lien ? 

C'est pourquoi dropzone peut comporter un (et un seul) de ces trois mots-cles : 

• copy : indique que le depot d'un objet autorise sur l'element resultera en une copie 
des donnees deplacees ; 

• move : indique que le depot d'un objet autorise sur l'element correspondra a un 
deplacement direct des donnees ; 

• link : indique que le depot d'un objet autorise sur l'element resultera en un lien 
vers les donnees initiales. 

Deux sortes de donnees pouvant etre deposees (texte ou fichier binaire), dropzone 
peut egalement porter plusieurs autres termes separes par des espaces : 

• Une chaine de texte debutant par s : indiquant que des objets chaine de texte 
Unicode du type defini par le mot-cle figurant apres s : peuvent etre deposes. 

• Une chaine de texte debutant par f : indiquant que des fichiers du type indique 
par le mot-cle figurant apres f : peuvent etre deposes. 

Exemple d'usage de l'attribut dropzone 

<div id="drop" dropzone="copy f : image/jpeg f: image/prig f :image/gif"x/div> 

L'attribut present dans cet exemple va indiquer de facon visuelle a I'utilisateur, par un 
curseur specifique, que s'il relache l'objet sur l'element <div> une copie sera faite. II 
s'attendra a recevoir des fichiers binaires de type image (JPEG, PNG ou GIF). 

Figure 11-4 <%> ^ ^ 

Curseurs sous Windows move copy Unk 

Cependant, sa seule presence ne definit pas Taction reelle qui sera entreprise vis-a-vis 
du DOM et des donnees. Elle dependra de l'evenement drop et de la fonction Java- 
Script associee. 

Cet attribut est malheureusement peu supporte au moment de la redaction de cet 
ouvrage, mais un element cible peut gerer l'evenement dragenter afin de signifier a 
I'utilisateur qu'il accepte un drop, et l'evenement dragover pour donner un retour 
d'information au survol. En complement, les proprietes effectAl lowed et dropEffect 
de l'interface DataTransfer peuvent etre mises a contribution (voir ci-apres). 
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Les evenements dragenter et dragleave 

Durant un drag & drop, l'evenement dragenter est declenche a l'arrivee sur la cible 
tandis que dragleave est declenche a la sortie. 

Gestion des evenements dragenter et dragleave 

<scri pt> 

// Identifiant de 1 'element de reception 

var dropzone = document. getElementByld('drop') ; 

// Fonction entree survol de la cible 
function entree(event) { 

event . target . cl assName = ' deposezmoi ' ; 

event. preventDefaultO ; 

} 

// Fonction sortie survol de la cible 
function sortie(event) { 

event . target . cl assName = ' ' ; 

} 

// Redefinition des evenements 
if (window. addEventLi stener) { 

dropzone . addEventLi stenerC ' dragenter ' .entree) ; 

dropzone. addEventListenerC'dragleave' .sortie) ; 
} else { 

dropzone . attachEvent( ' dragenter ' , entree) ; 
dropzone . attachEvent( ' dragl eave ' , sortie) ; 

} 

//... 

L'effet de ces premieres instructions est de donner la classe deposezmoi a la cible 
lorsqu'elle est survolee par un element « draggable ». La consequence est purement 
graphique puisque cette classe declaree dans le style CSS lui confere une autre appa- 
rence visuelle. 

L'evenement dragover 

II est imperatif de desactiver pour l'evenement dragover le comportement par defaut 
des navigateurs, qui est en realite celui de refuser tout depot. En inversant son effet, 
l'element ne peut qu'accepter d'etre glisse-depose. 

Pour cela, il faut utiliser event. preventDefault() au sein des evenements dragover, 
dragenter, et eventuellement completer par return f al se ; pour d'autres navigateurs. 
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Deactivation du comportement par defaut dragover 

<script> 

// Identifiant de 1 'element de reception 

var dropzone = document .getElementById( ' drop ') ; 

// Fonction entree survol de la cible 
function entree(event) { 

event. target. className = ' deposezmoi ' ; 

event. preventDefault() ; 

} 

// Fonction sortie survol de la cible 
function sortie(event) { 
event. target. className = ''; 

} 

// Fonction d'annulation du comportement par defaut 
function survol (event) { 

event. preventDefault() ; 

return false; 

} 

// Redefinition des evenements 
if(window.addEventListener) { 

dropzone. addEventListenerC dragover' , survol) ; 

dropzone . addEventLi stener( ' dragenter ' .entree) ; 

dropzone . addEventLi stener( ' dragleave ' , sortie) ; 
} else { 

dropzone. attachEventC dragover' , survol) ; 
dropzone. attachEventC ' dragenter ' , entree) ; 
dropzone . attachEventC dragl eave ' , sorti e) ; 

} 

//... 

Des cet instant, le curseur change d'apparence et le navigateur semble autoriser le 
emplacement des elements possedant l'attribut draggable vers 1' element <div 
id="drop">, pour lequel le comportement de refus de l'evenement dragover a ete 
desactive. C'est un pas de plus vers le resultat attendu, il ne reste plus qua obtenir un 
transfert concret de donnees. 

C'est l'occasion de completer les elements « draggables » par les attributs 
ondragstart et ondragend. La cible gagne les attributs dropzone et ondrop. 

Attributs pour la gestion des evenements ondragstart et ondrop 

<pxstrong>Clisser. . .</strongx/p> 
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<!-- Une image avec draggable, ondragstart , ondragend --> 
<img src="photol. jpg" alt="" draggable="true" 
ondragstart="deplace(event) ; "ondragend="supprime(event) ; "> 

<!-- Une image avec ondragstart --> 

<img src="photo2 .jpg" alt="" ondragstart="deplace(event) ; "> 

<!-- Une image avec draggable --> 

<img src="photo3.jpg" alt="" draggable="true"> 

<!-- Un paragraphe avec ondragstart, ondragend --> 
<p draggable="true" ondragstart="deplace(event);" 
ondragend="supprime(event) ; ">Texte</p> 

<pxstrong>Deposer. . .</strongx/p> 

<!— Cible — > 

<div id="drop" dropzone="move s:text/plain" ondrop="depot(event) ; "></di v> 

Les fonctions deplace(), depot(), et supprime() vont etre ecrites pour repondre aux 
attributs-evenements ondragstart, ondrop et ondragend. Elles vont recevoir d'office 
l'objet evenement nomme event. 

Prototypes des callbacks 

function deplace(event) { 
// event . . . 

} 

function depot(event) { 
// event. . . 

} 

function supprime(event) { 
// event. . . 

} 



L interface DataTransfer 

L'API est completee par l'interface DataTransfer, qui vient jouer le role de porteur 
d'informations en HTML 5. Elle stocke les donnees en provenance de lelement deplace, 
a l'evenement dragstart, et les communique a la cible receptrice a l'evenement drop. 
C'est la propriete event . dataTransfer qui offre un acces complet a cette interface. 

function deplace(event) { 
// event . dataTransfer .. . 

} 
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L'evenement dragstart 

L'evenement dragstart est declenche des que l'objet est deplace. II va mettre a dis- 
position sa propriete dataTransfer pour : 

• Definir quel « effet » de deplacement est autorise (move, copy, link) avec la pro- 
priete dataTransfer . ef f ectAl 1 owed. 

• Memoriser les donnees et les rendre disponibles pour tous les autres evenements 
declenches pour le drag & drop avec la methode setDataC). 

effectAllowed et dropEffect 

La propriete effectAllowed determine ce qui se produit lorsque l'objet source est 
libere grace aux valeurs suivantes. 



Tableau 11-2 Valeurs de I'attribut effectAllowed 



Valeur 


Role 


none 


[.'element ne peut etre deplace 


copy 


Copie seule 


copyLi nk 


Copie ou lien 


copyMove 


Copie ou deplacement 


link 


Lien seul 


1 i nkMove 


Lien ou deplacement 


move 


Deplacement seul 


all 


Copie, deplacement ou lien 


uni ni ti al i zed 


Valeur par defaut 



L'operation de copie indique que l'objet doit etre copie depuis son emplacement 
d'origine vers la destination, l'operation de deplacement signifie qu'il sera purement 
et simplement deplace d'un endroit a l'autre, et l'operation etablissant un lien symbo- 
lise la creation d'une relation entre l'origine et la destination. 

Usage de la propriete effectAllowed 

// Traitement du deplacement 
function deplace(event) { 

event. dataTransfer. effectAllowed="all " ; 

} 

Par defaut, effectAllowed possede la valeur "all ". Rappel : la fonction deplaceO ici 
presente est declenchee par la presence de I'attribut ondragstart="deplace(event) ; " 
sur les elements « draggables ». 
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La propriete dropEffect determine quelles operations sont autorisees sur la cible. 
Elle doit etre comprise dans les valeurs autorisees par effectAllowed. Par exemple, si 
la source autorise tous les types de drag & drop avec effectAllowed="all ", alors la 
cible peut restreindre les possibilites uniquement a la copie avec dropEffect="copy" 
durant dragover. 

Usage de la propriete dropEffect 

// Declenche par dragover 
function survol (event) { 

event . dataTransf er . dropEf fect="copy" ; 

event. preventDefault() ; 

return false; 

} 

La propriete dropEffect est exploitable avec les evenements dragenter, dragover et 
drop. 

La presence de ces variables dans les fonctions-evenements permet de controler 
dynamiquement ce qu'il est possible de faire avec un objet, relativement a sa prove- 
nance, sa destination, et son contenu. 

II faut savoir qua long terme, l'utilisateur doit avoir la possibilite de choisir - dans les 
limites autorisees par le script - quel effet de deplacement il souhaite operer, grace a 
des combinaisons de touches, par exemple ctrl pour la copie, shift pour le deplace- 
ment. Le curseur doit refleter ce choix avec une symbolique differente. 

setDataO 

Au-dela de ces ajustements, dataTransfer revet le role strategique de messager, dont 
les donnees transportees sont definies par la methode setDataO. Son premier argu- 
ment recoit le type des donnees memorisees, et son second recoit les donnees. 

Usage de la methode setDataO 

// Traitement du deplacement 
function deplace(event) { 

event . dataTransfer . eff ectAllowed="al 1 " ; 

// event. target fait reference a 1 'element qui est deplace 

event . dataTransfer . setData("text/ 
pi ai n" , event . target . i nnerText | | event . target . textContent) ; 
} 

Cet appel stocke pour le format text/pl ai n (texte simple) la valeur des proprietes 
i nnerText ou textContent de l'element (Firefox ne comprend pas la premiere et IE 
ignore la seconde). Plusieurs formats sont stockables, il est alors possible d'ameliorer 
quelque peu cette fonction en l'etoffant de differents types. 
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Usage ameliore de la methode setDataO 

// Traitement du emplacement 
function depl ace (event) { 

event . dataTransf er . ef f ectAl 1 owed="al 1 " ; 

var attribut_src = event. target. getAttri bute("src") ; 

if (attribut_src!=null) { 
event .dataTransf er.setData(" text/html " , ' <img src=" ' +attribut_src+' "> ' ) ; 

} else { 

event . dataTransf er . setData("text/ 
pi ai n" , event . target . i nnerText | | event . target . textContent) ; 
} 

} 

Un code HTML est associe a text/html si l'attribut sre est existant. 

Malheureusement jusqu'a Internet Explorer 9 inclus, les deux seuls formats compris 
sont Text et URL. Toute autre tentative renverra une erreur et stoppera le script. C'est 
pourquoi il faut gerer une exception pour ce navigateur et emuler - dans la mesure du 
possible - un echange de donnees au-dessus d'une simple valeur texte. 

L'evenement drop et getData() 

Au depot sur la destination, l'interface permet de retrouver les informations memorisees, 
grace a la methode getData(). II s'agira de la declencher lors de l'evenement drop. 

Utilisation de la methode getData 

// Traitement du depot 
function depot(event) { 
event . preventDefaultO ; 

// event. target fait reference a 1 'element cible 

event . target . i nnerHTML += event . dataTransf er . getData ("text/pl ai n") ; 

} 

Rappel : la fonction depot () ici presente est declenchee par la presence de l'attribut 
ondrop="depot(event) ; " sur I'element de destination. Elle aussi utilise la methode 
preventDefaultO sur l'objet evenement recu pour desactiver son comportement par 
defaut et empecher le navigateur de charger l'objet depose dans la navigation courante. 

Le resultat du depot est la modification du contenu HTML de I'element devant 
recevoir les informations du drop. Au contenu sont ajoutees les donnees stockees 
dans l'interface dataTransf er, de type text/plain, e'est-a-dire l'attribut src. 

Comme cela a deja ete precise, il peut exister plusieurs « cles » de formats simultane- 
ment memorisees pour la methode getData(). Elles peuvent etre decouvertes via 
dataTransf er. types. Or, une valeur a ete stockee pour text/html lors de l'appel a 
depl ace O , c'est le moment d'en profiter. 
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Figure 11-5 

Resultat du emplacement 



Glisser... 




photol jpg photo2.jpg 



Utilisation amelioree de la methode getData 

// Traitement du depot 
function depot(event) { 
event . preventDefaul t() ; 

var html = event . dataTransfer . getData("text/html ") ; 
var texte = event . dataTransfer . getData("text/pl ai n") ; 
if (html) event . target . i nnerHTML += html + " "; 
else event . target . i nnerHTML += texte + " "; 
event . target . cl assName = ''; 

} 

Le resultat est nettement plus rejouissant, a l'aide d'une petite modification de code, 
il a ete possible d'injecter un element <img>, copie de l'origine, et de gerer une alter- 
native texte simple pour les elements de paragraphe texte. Ce dernier abandonne son 
style initial, car les regies CSS definies ne s'appliquent plus a ce contexte. 



Figure 11-6 

Resultat du deplacement 



Glisser... 




Texte 
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Notez qu'il n'est pas toujours necessaire de stacker explicitement des donnees pour 
chacun des formats de base. Certains navigateurs determinent par eux-memes les 
formats et les donnees pouvant etre retires des elements « draggables ». Pour ne citer 
qu'un exemple, Firefox determine comme un grand les formats text/plain, text/ 
html, text, text/uri -1 i st, et url pour une image. 

L'evenement dragend 

L'evenement dragend declenche a la fin d'un glisser-deposer est exploitable pour 
retirer du DOM l'element d'origine, s'il ne faut pas conserver de copie. 

Dans cette optique, l'element « glissable » doit etre complete d'un attribut evene- 
ment dragend. 

<img src="photol. jpg" alt="" draggabl e="true" 
ondragstart="depl ace (event) ; " ondragend="supprime(event) ; "> 

La fonction correspondante supprime l'enfant event. target du parent .wrap. 

Fonction de suppression du DOM 

// Suppression de l'element ayant suscite l'evenement 
function supprime(event) { 

event . target . parentNode . removeChil d(event . target) ; 

} 

Suite a cette suppression, il faut prevoir dans le cas du deplacement de plusieurs ele- 
ments de pouvoir les retablir dans leur etat d'origine. 

Aller plus loin 

La methode clearData()efface les donnees associees, s'ily a lieu de I'utiliser. 

N'oubliez pas de mettre a contribution les attributs aria-grabbed et aria- 
dropeffect pour une meilleure prise en compte de I'accessibilite. 

Ressource Bonnes pratiques pour un glisser-deposer accessible 

WAI-ARIA Authoring practices 
► http://www.w3.Org/WAI/PF/aria-practices/#dragdrop 



Script complet 

Apres toutes ces etapes variees, voici le script complet reunissant toutes les etapes de 
l'operation de glisser-deposer. 
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<scri pt> 

// Identifiant de 1 'element de reception 

var dropzone = document .getElementById( ' drop ') ; 

// Fonction entree survol de la cible 
function entree(event) { 

event. target. className = ' deposezmoi ' ; 

event. preventDefault() ; 

} 

// Fonction sortie survol de la cible 
function sortie(event) { 
event. target. className = ''; 

} 

// Fonction d' annul ati on du comportement par defaut 
function survol (event) { 

event . dataTransf er . d ropEf f ect="copy" ; 

event. preventDefault() ; 

return false; 

} 

// Redefinition des evenements 
if (window. addEventLi stener) { 

dropzone . addEventLi stener( ' dragover ' , survol) ; 

dropzone. addEventListener('dragenter' , entree) ; 

dropzone. addEventLi stener('dragleave' , sortie) ; 
} else { 

dropzone. attachEventC dragover' , survol) ; 
dropzone. attachEvent( ' dragenter ' , entree) ; 
dropzone. attachEventC dragleave' , sortie) ; 

} 

// Traitement du deplacement 
function deplace(event) { 

event . dataTransf er . ef f ectAl 1 owed="al 1 " ; 

var attribut_src = event. target. getAttri bute("src") ; 

if (attribut_src!=null) { 
event .dataTransf er . setData(" text/html " , ' <img src=" ' +attribut_src+ '">'); 

} else { 

event . dataTransf er . setData("text/ 
pi ai n" , event . target . i nnerText | | event . target . textContent) ; 
} 

} 

// Traitement du depot 
function depot(event) { 

event. preventDefault() ; 

if (event . dataTransfer) { 
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var html = event. dataTransfer. getData("text/html ") ; 
var texte = event. dataTransfer. getData("text/pl ai n") ; 
if(html) event. target. innerHTML += html+" "; 
else event. target. innerHTML += texte+" "; 
event. target. className = ''; 

} 

} 

// Suppression de 1 'element ayant suscite l'evenement 
function supprime(event) { 
event . target . parentNode . removeChi 1 d(event . target) ; 

} 

</script> 
A vous, les studios. 



Glisser-deposer de fichiers 

Le glisser-deposer de fichiers depuis ou vers le systeme d 'exploitation dans le naviga- 
teur est une grande avancee en termes de simplicite pour l'utilisateur. II repose sur les 
principes generaux du Drag & Drop et sur l'API DataTransfer. 

Depot depuis le systeme (drag-in) 

La propriete event. dataTransfer.files est de type FileList. Elle contient une liste 
des fichiers deposes de type File. Cette liste signifie qu'il est possible de deplacer plu- 
sieurs fichiers en un seul « mouvement ». Elle reste bien sur vide si l'operation ne 
concerne aucun fichier. 

Cible HTML 

<div dropzone="copy f : image/jpeg f: image/prig f : image/gif" 
ond rop="depot (event) "></di v> 

Lattribut dropzone de la cible autorise la copie et les types image/jpeg, image/png, 
image/gi f. 

Script de depot 

<scri pt> 

// Identifiant de 1 'element de reception 

var dropzone = document . getEl ementBy!d( ' drop ') ; 



458 



11 -Gestion du glisser-deposer (Drag & Drop) 



// Fonction entree survol de la cible 
function entree(event) { 
event . preventDefaul t() ; 

} 

// Fonction d' annul ati on du comportement par defaut 
function survol (event) { 

event . dataTransfer . dropEf fect="copy" ; 

event. preventDefault() ; 

return false; 

} 

// Redefinition des evenements 
if (window. addEventLi stener) { 

dropzone . addEventLi stener( ' dragover ' , survol ) ; 

dropzone . addEventLi stener (' dragenter ' , entree) ; 
} else { 

dropzone . attach Even t( ' dragover ' , survol ) ; 
dropzone . attach Even t( ' dragenter ' , entree) ; 

} 

// Traitement du depot 
function depot(event) { 
event. preventDefault() ; 

// Liste des fichiers dropes 

var fichiers = event. dataTransfer. files; 

// Boucle sur chacun des fichiers de la liste 
for(var i=0 ; i<fichiers. length ; i+=l) { 

// Affichage des informations 

event . target . i nnerHTML += "<p>Nom : "+f ichiers[i] . name+"<br>" ; 
event . target . i nnerHTML += "Taille : "+fichiers[i] . size+" o<br>"; 
event . target . i nnerHTML += "Type : "+f ichiers[i] . type+"</p>" ; 
event. target. appendChild(img) ; 

} 

} 

</scri pt> 

A la reception des donnees via dataTransfer. files, une boucle for() parcourt la 
liste obtenue, dont on connait le nombre d'elements grace a la propriete . 1 ength. 
Pour chaque iteration, les informations relatives au nom (name), a la taille (size) et 
au type (type) du fichier sont ajoutees dans le corps HTML de la cible, 
event . target. 
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Figure 11-7 

Resultat des informations 
obtenues 



Deposer des images.. 

r 

Nom : photo 1 jpg 
Taille : 5160 octets 
Type : image/jpeg 



Nam : phata2.jpg 
Taille : 17625 octets 
Type : image/jpeg 



En symbiose avec FileReader et Data URI 

Des l'instant oil le script dispose d'une telle liste de fichiers, de type FileList avec 
des elements individuels de type Fi 1 e, il est possible de faire appel individuellement 
pour chacun des fichiers aux methodes offertes par l'API File. L'application web 
peut alors proposer des fonctionnalites d'acces au contenu, allant bien plus loin que le 
simple affichage des quelques informations ci-dessus. 

Les politiques de securite etant capricieuses, cette technique peut ne produire aucun 
resultat du cote de FileReader si le fichier HTML est execute en local dans le navi- 
gateur (file://). 

Code complet Drag & Drop et FileReader dans le navigateur 

<!D0CTYPE html> 
<html lang="fr"> 
<head> 

<meta charset="utf-8"> 

<title>HTML5 : Drag and Drop !</title> 

<link rel="stylesheet" href="styles.css" type="text/css"> 

<style> 

#drop { 

height: 200px; 

width: 90%; 

border: 3px dashed #bbb; 
padding: lem; 
margi n-bottom : lem; 

} 

#drop: hover { 
background:#cf9; 

} 

.deposezmoi { 
background :#b5e766; 
border: 3px dashed #79a633; 

} 

.wrap img { 
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max-width:100%; 

} 

</styl e> 

</head> 

<body> 

<div class="wrap"> 
<pxstrong>Deposer des images .. .</strongx/p> 

<div id="drop" dropzone="copy f : i mage/ j peg f : image/prig f : image/gif " 
ondrop="depot (event) ; "></div> 

</di v> 

<scri pt> 

// Identifiant de 1 'element de reception 

var dropzone = document .getElementById( ' drop ') ; 

// Fonction entree survol de la cible 
function entree(event) { 

event. target. className = ' deposezmoi ' ; 

event. preventDefault() ; 

} 

// Fonction sortie survol de la cible 
function sortie(event) { 
event. target. className = ''; 

} 

// Fonction d'annulation du comportement par defaut 
function survol (event) { 

event . dataTransf er . d ropEf f ect="copy" ; 

event. preventDefault() ; 

return false; 

} 

// Redefinition des evenements 
if (window. addEventLi stener) { 

dropzone. addEventListener('dragover' , survol) ; 

dropzone. addEventl_istener('dragenter' , entree) ; 

dropzone. addEventLi stener('dragleave' , sortie) ; 
} else { 

dropzone. attachEvent( ' dragover ' , survol) ; 
dropzone. attachEvent( ' dragenter ' , entree) ; 
dropzone. attachEvent('dragleave' , sortie) ; 

} 

// Traitement du depot Q 
function depot(e) { 
e.preventDefault() ; 
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var fichiers = e.dataTransfer. files; 

// Boucle sur la liste des fichiers dropes 
for(var i=0; i<fichiers. length; i+=l) { 

// Memorisation dans une variable en short 
var f = fichiers[i] ; 

// Affichage des informations 

e. target. innerHTML += "<p>Nom : "+f . name+"<br>" ; 

e. target. innerHTML += "Taille : "+f.size+" octets<br>"; 

e. target. innerHTML += "Type : "+f .type+"</p>" ; 

// Si le type correspond a une image Q 
i f (f . type . match ( ' i mage .'••')) { 

if (typeof window. FileReader !== 'undefined') { 

// Instanciation de FileReader 
reader = new FileReaderO ; 

// Definition de l'evenement load de FileReader 
reader. onload = function (event) { 
// Ajout en tant que background 

dropzone. style. background = ' url ( ' +event. target. result+') no-repeat 

center' ; 

// Ajout en tant qu' image 

var img = document. createElement('img') ; 

img.src = event. target. result; 

// Ajout dans le DOM 

dropzone . parentNode . i nsertBefore(i mg , dropzone . nextSi bl i ng) ; 

}; 

// Lancement de FileReader pour le fichier 
reader . readAsDataURL(f ) ; 

} else alert("FileReader non supporte") ; 

} 

return false; 

} 

} 

</script> 

</body> 
</html> 
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Le debut de la procedure reste semblable. II s'agit toujours d'intercepter l'evenement 
drop O pour recueillir la liste des fichiers ©. File API permet d'obtenir quelques infor- 
mations sur chacun d'entre eux et de les afficher a l'interieur de la cible. Suite a cela, si 
le type correspond bien a celui d'une image ©, un nouvel objet Fi 1 eReader est cree ©. 

Tout se joue dans l'evenement load de l'interface Fil eReader © qui recoit un objet- 
evenement event dont la propriete target, result contient les donnees renvoyees 
par le lecteur de fichier. 

II est alors possible d'assigner event. target, result en tant qu'adresse (url) de fond 
CSS ©, ou plus simplement en tant qu'adresse d'une image ajoutee dynamiquement 
dans le document © (attribut src). 

La gestion de l'evenement load etant declaree, il ne reste plus qua appeler la 
methode readAsDataURLO de l'interface ©, pour declencher la lecture de l'objet 
fichier en tant que DataURL. En effet, si Ton examine le code genere, le navigateur a 
converti le contenu binaire du fichier en chaine de texte du type : 

data: [<medi atype>] [ ; base64] , <donnees> 

Cette syntaxe mentionnant le type MIME correspond a la specification Data URI 
scheme qui autorise le stockage de donnees par l'entremise d'une adresse virtuelle 
data: , directement exploitable dans un document HTML. 



Figure 11-8 

Depot de fichiers images 
dans le navigateur 
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Pour ajouter d'autres traitements et une technique d'envoi vers le serveur (upload), reportez-vous au 
chapitre precedent sur I'API d'interaction avec des fichiers. 



Depose d'elements hors du navigateur (drag-out) 

Google a suggere de completer la specification par un format DownloadURL pour la 
methode setDataO qui serait en mesure d'etre interprete par le navigateur pour 
glisser-deposer des fichiers hors de sa propre fenetre. 

C'est une fonctionnalite qui ne fonctionne, a l'heure des derniers tests, que sur 
Google Chrome. 

Glisser-deposer de fichiers images hors du navigateur 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<meta charset="utf-8"> 

<title>HTML5 : Drag and Drop !</title> 

<link rel="stylesheet" href="styl es . ess" type="text/css"> 

</head> 

<body> 

<div cl ass="wrap"> 

<pxstrong>Gl i sser vers le bureau ... </strongx/p> 
<P> 

<a href="photol. jpg" cl ass="dragout" data-downloadurl="image/ 
j peg : photol . j pg : http : //www . mondomai ne . com/drag-and-drop/ 
photol . jpg">Photo l</a> 

<a href="photo2. jpg" cl ass="dragout" data-downloadurl="image/ 
j peg : photo2 . j pg : http : //www . mondomai ne . com/drag-and-drop/ 
photo2 . jpg">Photo 2</a> 

<a href="photo3 . jpg" cl ass="dragout" data-downloadurl="image/ 
j peg : photo3 . j pg : http : //www . mondomai ne . com/drag-and-drop/ 
photo3 . jpg">Photo 3</a> 

</p> 
</di v> 

<scri pt> 

// Ensemble de fichiers cibles d'apres la classe 

var fichiers = document. getElementsByClassName("dragout") ; 
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// Boucle sur les fichiers trouves 
for(i = 0; i<fichiers. length; i++) { 

// Pour chacun un gesti onnai re d ' evenement dragstart Q 
fichiers[i] . addEventLi stener("dragstart" , function(event) { 

// Les donnees sont stockees dans un attribut 
// data-downloadurl , accessible par deux methodes Q 
i f (event . target . dataset && event . target . dataset . downl oadurl ) { 

// Si la propriete dataset existe 

var data = event . target . dataset . downl oadurl ; 
} else { 

// Sinon par getAttribute 

var data = event. target. getAttribute("data-downloadurl ") ; 

} 

// setData sur 1 'interface dataTransfer de 1 'evenement Q 
event . dataTransfer . setData("Downloadl)RL" , data) ; 

}, false); 

} 

</scri pt> 

</body> 
</html> 

Lecriture est quelque peu plus condensee, car moins d'evenements sont kisses a la charge 
du navigateur. L'essentiel consiste a profiter de l'evenement dragstart0 pour definir la 
cle Downl oadURL. Celle-ci recoit une chaine de texte Q suivant une syntaxe precise : 

type MIME:nom du fichier depose: url absolue de telechargement 

Les trois valeurs sont separees par des signes deux-points « : ». La solution la plus 
souple reste d'attacher cette chaine de texte aux differents liens avec un attribut 
data-downl oadurl et d'aller la chercher avec la propriete dataset si le navigateur 
la supporte ou plus simplement la methode getAttri bute(). 



Figure 11-9 

Resultat des informations 
obtenues 
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Prise en charge du glisser-deposer 

Tableau 11-3 Prise en charge par les navigateurs du Drag & Drop HTML 5 



Navigateur 


Version 


Mozilla Firefox 


3.5+ 


Apple Safari 


4+ 


Google Chrome 


5+ 


Opera 




iOS, Opera Mini, Opera Mobile 




Android 


2.1 + 


Internet Explorer 


9+ (partiel) et 10+ 



Rappel 

Reportez-vous au site d'accompagnement du livre pour des informations de prise en charge mises a jour. 
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Evenements envoyes 
par le serveur (« push ») 



II faut toujours rester a l'ecoute de son prochain, surtout si c'est un serveur 
web... Faisons appel aux messages-evenements pour « pousser » des 
donnees dans le navigateur. 




Figure 12-1 Communication d'antan 
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Les applications web et sites dynamiques d'aujourd'hui ne sont plus dependants de 
communications a sens unique, ni de simples transactions HTTP pour obtenir le 
contenu des pages, une par une, depuis le serveur. lis font desormais couramment 
appel a des fonctionnalites de mises a jour de portions de contenu ou de reception de 
notifications, sans rechargement complet du document HTML. 

Ces usages modernes n'ont pas ete imagines lorsque les fondements du protocole 
HTTP ont ete poses. C'est par des artifices construits autour de XMLHttpRequest 
(alias « Ajax ») ou de I' element <i f rame> que la plupart des developpements ont vu le 
jour, en presentant toutefois des inconvenients. 

• La complexite de mise en place en premier lieu, n'est pas a la portee de tous. II 
s'agit bien souvent de maitriser une librairie JavaScript epaulee par un script exe- 
cute cote serveur qui doivent convenir d'un mode de dialogue pour s'entendre sur 
la validite et la fraicheur des donnees convoyees. 

• Le navigateur doit etre a l'origine de la demande et formuler regulierement des 
requetes, sans necessairement savoir par avance si une information pertinente 
l'attend. Le trafic reseau en est accru inutilement. 

• Ces echanges etant toujours bases sur le protocole HTTP, ils sont vehicules pour 
chaque requete avec des en-tetes complets, fut-ce pour ne recevoir qu'un seul 
caractere. Lefficacite pour de petits echanges en est amoindrie et la charge ser- 
veur prend un coup dans l'aile. 



Push-toi, j 'arrive 

Lideal serait bien entendu que le serveur web soit a l'origine d'une transmission en 
direction du client, le poussant du coude pour lui signifier qu'il peut avoir des don- 
nees interessantes en attente. C'est le principe du « push ». 

Les Server-Sent Events (SSE) ou « evenements envoyes par le serveur » sont une 
maniere de transmettre de l'information, depuis le serveur vers le navigateur, par 
notifications ponctuelles et continues. C'est bien le navigateur qui initie la connexion 
et qui reste a l'ecoute du serveur. Ce dernier peut alors envoyer des messages au 
format texte dans le flux ouvert. 



RESSOURCE Specification Server-sent Events au W3C et WhatWG 

► http://dev.w3.org/html5/eventsource/ 

► http://www.w3.org/TR/eventsource/ 

► http://www.whatwg.Org/specs/web-apps/current-work/complete/comms.html#server-sent-events 
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Principe 

Une fois que la connexion a ete etablie par le navigateur web, les informations par- 
viennent a la page HTML sous la forme d'evenements DOM. Par defaut, lorsqu'un 
evenement message (ou onmessage) est recu, une fonction peut etre declenchee pour 
prendre connaissance des donnees transmises et en faire quelque chose d'utile. Cette 
methode elimine la necessite d'interroger continuellement le serveur. 

Des notifications de mises a jour sont a meme d'etre envoyees regulierement de 
maniere espacee, ou via des flux continus de donnees, le tout de facon native. 

L'action en resultant peut etre un affichage du message recu sur la page, ou bien une 
action sur le DOM pour une modification plus avancee du contenu, voire le declen- 
chement d'un autre script precharge. Avec JavaScript, tout est possible ! 



Figure 12-2 

Schema de connexion 



Evenement DOM 



r p^h O lA 

M * p-~"> 

Navigateur Serveur Base de 

(Event Source) (HTTP) donnees 



Le format d'echange est base sur du texte simple, ce qui simplifie la mise en place, 
quel que soit le langage utilise cote serveur (PHP, .NET, Java, Python, Ruby, etc.). 
Cette API magique, apparue la premiere fois a l'initiative du WhatWG dans Web 
Applications 1.0, estbaptisee EventSource. 



Sous le capot 

Cote client (navigateur) 

La premiere etape consiste a instancier un objet EventSource. 

Initialisation EventSource 

var sse = new EventSource('event-source.php') ; 

// Gestionnai re d'evenement 
sse . onmessage = function (event) { 
console. 1og(event. data) ; 

}; 
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Dans cet exemple : 

1 Un constructeur EventSource, prenant en argument l'adresse URL a ecouter, ren- 
voie un objet source qui servira d'interface pour toutes les actions futures. L'URL 
est interrogee des l'appel au constructeur par une methode GET. 

2 Une fonction est assignee a la propriete onmessage de l'objet source. C'est celle-ci qui 
sera declenchee a la reception d'un message, et qui recevra en parametre une copie de 
l'evenement, disposant notamment d'une propriete data avec le contenu du message. 

Note : la declaration du gestionnaire d'evenement peut aussi etre formulee avec 
addEventLi stener en suivant la recommandation DOM. 

sse . addEventLi stener( ' message ' , function(event) { 

console. log(event. data) ; 
}, false); 



Proprietes et methodes 

Tableau 12-1 Apercu de I'interface EventSource 



Propriete ou methode 


Description 


onmessage 


Evenement reception du message 


onopen 


Evenement ouverture de la connexion 


onerror 


Evenement erreur de connexion 


readyState 


Etat de I'interface avec les valeurs 

EventSource. CONNECTING, EventSource .OPEN, 

EventSource. CLOSED 


closeQ 


Fermeture de la connexion 



Cote serveur 

Le premier critere essentiel a observer est de servir le flux avec le type MIMEtext/ 
event-stream. En PHP, cela peut etre accompli avec la fonction header(). Les 
autres langages disposent de fonctions equivalentes. 

header("Content-Type : text/event-stream") ; 

Le contenu doit de preference etre encode en UTF-8. II peut tout a fait etre delivre 
par echo et pri nt. 

Script event-source.php 

<?php 

header( ' Content-type : text/event-stream') ; 
echo 'data: ' .timeO . PHP_EOL; 

?> 



470 



12 - Evenements envoyes par le serveur (« push ») 



Ce script minimaliste envoie en donnees le timestamp Unix du serveur (nombre de secondes 
ecoulees depuis le l er janvier de l'an de grace 1970). Les fins de ligne acceptees sont CRLF 
(\r\n), CR (\r) et LF (\n). La constante PHP_E0L (End of Line) est prevue pour cela. 

Une fois ce script PHP combine a la partie client JavaScript ecrite precedemment 
avec la gestion d'evenement, la console du navigateur affiche les donnees recues pour 
chaque message, c'est-a-dire chaque timestamp. 



Figure 12-3 l^jij Elements jjjj Resources ^Network 

Resultat dans la console m , Errors wfarninB8 Log8 ~ 

131204-6647 
1312046658 
1312046653 
1312046656 
1312046659 
1312046662 
1312046665 

> 

Dans le cas present, le script PHP n'envoie qu'une seule information, puis s'acheve. 
Le serveur HTTP ferme done la connexion, et le navigateur est oblige d'en initialiser 
une nouvelle quelques secondes plus tard pour interroger a nouveau le flux. 

Mise en place d'un flux continu 

EventSource permet d'envoyer progressivement des donnees, et done de recevoir plu- 
sieurs evenements, sans fermer la connexion. De la sorte, une seule requete GET est 
formulee, avec un seul lot d'en-tetes, le tout sans devoir creer une nouvelle connexion 
TCP/IP entre navigateur et serveur. C'est un gain appreciable qui allege le trafic 
reseau, ainsi que l'occupation des ressources des deux machines, pour l'ensemble des 
actions a mener a bien. 

Pour examiner ce cas, construisons une horloge texte, qui recevra toutes les secondes 
le timestamp depuis le serveur, puis le convertira avec JavaScript pour l'afficher. 

Page HTML 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : EventSource</title> 
<meta charset="utf-8"> 
<style> 
P { 

padding :0. 5em; 
margin :0; 

font-fami ly: sans-serif ; 
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} 

.message { 

background :#F1F1F1; 

paddi ng : . 5em ; 

border-top : lpx solid #ccc; 

} 

.erreur { 

background:#FF7800; 
col or: white; 

} 

.ok { 

background :#A9C832; 
col or: white; 
margin-top:0. 5em; 

} 

#maintenant { 

font-size:l. 5em; 
color:#666; 

} 

</style> 

</head> 

<body> 

<p i d="mai ntenant"x/p> 
<div id="infos"x/div> 

<scri pt> 

// Creation d'un nouvel objet Server-Sent Event 
var sse = new EventSource("flux.php") ; 

var date = document . getEl ementById("i nfos") ; 

var maintenant = document . getEl ementById("mai ntenant") ; 

// Evenement de reception d'un message 

sse.onmessage = function (event) { 

// Nouvel objet Date 

var dt = new DateO; 

// Affectation du timestamp recu 

dt . setTi me (par selnt (event . data) * 1000) ; 

// Insertion dans le document 

mai ntenant . i nnerHTML = dt.toStringO ; 

// Ajout des donnees brutes dans la zone d'information 

i nfos . i nnerHTML += "<p cl ass=\"message\">"+event . data+"</p>" ; 

}; 

// Evenement d'erreur (ou de fermeture de connexion) 
sse.onerror = function(event) { 

i nfos . i nnerHTML += "<p class=\"erreur\">Fin de connexion a 
"+e . srcEl ement . URL+"</p>" ; 

}; 
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// Evenement d'ouverture de connexion 
sse.onopen = function (event) { 

i nfos . i nnerHTML += "<p cl ass=\"ok\">Connexi on ouverte</p>" ; 

}; 

</scri pt> 

</body> 
</html> 

Ce document se compose cl'un paragraphe #mai ntenant recevant la date a afficher et 
d'un conteneur #infos pour l'archivage des messages. Quelques styles cosmetiques 
sont de la partie, le reste se deroule du cote de la balise <scri pt>. 

La connexion est initialisee vers un script PHP (ci-dessous). Lorsque 1' evenement 
message survient : 

1 La fonction associee a la propriete onmessage est declenchee, recevant l'objet eve- 
nement. Les seules donnees sont un timestamp, soit un nombre entier positif 
stocke dans e . data sous forme de chaine de caracteres. 

2 Un objet date est initialise, auquel est affecte le timestamp. Ce demier doit etre converti 
en entier avec parselntO puis etre multiplie par 1000, car il est recu en secondes, tan- 
dis quelamethode setTimeO de JavaScript attend unevaleur en millisecondes. 

3 Le contenu HTML de #mai ntenant est modifie pour recevoir la date convertie 
en texte humainement comprehensible grace a toStringO. Les donnees recues 
sont ajoutees egalement a #infos pour visualiser les messages echanges entre les 
phases de connexion/deconnexion. 

Script PHP flux.php 

<?php 

header ( ' Content- type : text/event-stream ' ) ; 

// Demarrage du tampon de sortie 
ob_start() ; 

// Date limite d'execution (mai ntenant+5 secondes) 
$dt_"limit = time()+5; 

// Tant que le moment present est inferieur a la date limite... 
while(time()<$dOimit) { 

// Sortie des donnees dans le tampon 

// ...avec double saut de ligne 

echo 'data: ' .time() . PHP_E0L. PHP^EOL; 

// Vidage du tampon 

ob_fl ush() ; 
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flushQ ; 

// Roupillon d'une seconde 
sleep(l) ; 

} 

// Fin du tampon 
ob_end_flush() ; 

?> 

La prise en charge par le tampon (buffer) interne de PHP avec les fonctions 
ob_start(), ob_flush(), ob_end_f1ush() autorise la sortie d 'informations par 
vagues, provoquant un evenement DOM a chaque fiot recu. Le double saut de ligne 
signifie que le paquet de donnees est complet et qu'il n'est pas necessaire d'attendre 
une autre ligne debutant par data : pour en disposer. S'il n'est pas present, toutes les 
donnees seront regroupees (voir syntaxe ci-apres). 

La boucle force le script a s'executer durant 5 secondes, approximativement toutes les 
secondes apres etre entre dans une phase de sommeil avec sleep(l) pour economiser 
ses ressources. II faut faire attention a bien maitriser ce point, une boucle infinie 
whi 1 e(true) peut rapidement occuper toutes les ressources durant la duree maximale 
d'execution en PHP - surtout si elle est executee par plusieurs sessions paralleles. 

Par ailleurs, tout script PHP est soumis - dans un cadre d'execution standard - a une 
limite maximale d'execution, par defaut 30 secondes. Quoi qu'il arrive et quelle que 
soit la condition sur la boucle, il finit tot ou tard par expirer et fermer la connexion 
HTTP. Pas de panique, le navigateur se reconnecte tout seul tant que l'objet 
EventSource existe et qu'aucun appel a la methode closeQ n'est fait. 



Figure 12-4 

Ce script s'execute 

en boucle (duree maximale 

de 5 secondes) 



Path 


Method 


Status 

Text 


Type 


Size 
Trans 




ii ass 


17IITs 


22T5s 


28 44s 


34 13s 


1lux.html 

= 1 /server-sen I- events 


GET 


304 

Not Mod 


textmtml 


1 .11 Kl 
176B 


17rns 
16ms 


m 












~~| llux.php 

1 1 /server-sent- events 


GET 


2Q0 

OK 


textf event-stream 


10DB 

36SB 


5.01s 














~| llux.php 

1 | /server-sen t-events 


GET 


200 

OK 


textt event-stream 


1O0B 

363 B 


5.00s 














— 1 flux.php 

I | /server-sen t-e vents 


GET 


200 

OK 


text* event-stream 


1 0OB 

36BB 


5.00s 














~| flux.php 

! 1 /server-sent-e vents 


GET 


200 

OK 


textfevent-stream 


100B 
36BB 


5.00s 












- | flux.php 

I | /server-sent- events 


GET 


2D0 

OK 


texttevent-stream 


6QB 2.00s 

316B 3ms 















Dans l'exemple present, la duree est limitee a 5 secondes, ce qui laisse le temps a 
5 lignes data: de s'echapper, a intervalles d'une seconde. Le graphique reseau 
demontre qu'une premiere requete GET est effectuee pour la page HTML, puis 
directement pour le script PHP. La connexion est maintenue durant 5 secondes 
avant de se fermer. Une autre requete GET est formulee pour se reconnecter a la res- 
source, et ainsi de suite. 
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Sat Jul 30 201 1 23:49:10 GMT+0200 (Central Europe Daylight Time) 

data: 1312062532 
data: 1312062533 
data: 1312062534 
data: 1312062535 
data: 1312062536 



Fin de connexion a http://1 27.0.0. 1:8B88/server-sent-events/fliJx.php 
Connexion ouverte 



data: 1312062540 
data: 1312062541 
data: 1312062542 
data: 1312062543 
data: 1312062544 



Fin de connexion a http://127.0.0.1:BB8B/server-sent-events/flux.php 
Connexion ouverte 



data: 131206254S 
data: 1312062549 
data: 1312062550 

Pour forcer le serveur a transmettre les informations en cours d'execution du script, il 
ne faut pas hesiter a faire appel a flush () ou ob_FlushO selon le contexte. Le 
tampon est bien souvent configure au niveau du serveur lui-meme, et ces fonctions 
sont susceptibles de rester sans effet, provoquant un seul declenchement groupe de 
tous les evenements a la fin du script. II faut alors chercher du cote de la directive de 
configuration PHP output_bufferi ng et la desactiver. Un fichier .htaccess place 
dans le repertoire du script modifie localement cette instruction et autorise l'envoi 
sans attente au navigateur a chaque flush. 

.htaccess 

php_value output_buf feri ng 

Cette directive peut aussi se retrouver dans le fichier php.ini, mais attention aux 
effets de bord sur les autres scripts heberges. 

Syntaxe des messages source 

Les messages envoyes par la source doivent respecter une syntaxe stricte, mais relati- 
vement simple en mode texte. Chaque ligne doit debuter par un nom de champ 



Figure 12-5 

Resultat au rendu 
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Tableau 12-2 Structure des messages 



Champ 


Description 


Valeur 


data 


Ajoute les donnees recues au tampon de reception et les termine par un retour a la 
ligne LF (\n). 


Texte 


event 


Baptise I'evenement : le navigateur doit alors surveiller un type d'evenement particu- 
lier pour pouvoir reagir. 


Texte 


id 


Identifiant du message : le navigateur memorise cette variable et la transmet avec la 
prochaine requete dans I'en-tete HTTP Last-Event-ID. 


Texte 


retry 


Indique au navigateur le delai conseille de reconnexion, exprime en millisecondes. 


Nombre entier 



Si une ligne debute par le caractere « : », alors elle est ignoree. Si une ligne ne con- 
tient pas de caractere « : », alors toute la ligne sert de nom de champ, et aucune 
valeur n'est a considered 



data 

Le prefixe majeur a toute ligne utile est data: directement suivi des donnees. 
Exemple avec data 
<?php 

header('Content-type: text/event-stream') ; 
echo 'data: ' .timeO . PHP_EOL; 

?> 

Plusieurs lignes de type data : peuvent se suivre consecutivement, elles sont rassemblees 
par le navigateur dans I'evenement d'un unique message recu (separees par des retours a la 
ligne). Ecrire data : val eu r est equivalent a data : val eu r, car l'espace est ignoree. 

Exemple avec plusieurs lignes data 

<?php 

header( ' Content-type : text/event-stream') ; 

echo 'data: ' .time() . PHP_EOL; 
echo 'data: choucroute ' . PHP__EOL ; 

?> 

Un seul evenement DOM sera genere pour une chaine de texte contenant au total le 
timestamp, un saut de ligne LF (\n) (qui ne se remarquera pas en HTML a moins 
d'etre converti en <br>), et le mot choucroute. 
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En revanche, un double saut de ligne mene a la cloture des instructions data : le pre- 
cedant. 

Exemple avec deux ensembles de data 

<?php 

header ( ' Content- type : text/event-stream ' ) ; 

echo 'data: ' . ti me() . PHP_EOL ; 
echo 'data: choucroute ' . PHP_EOL ; 

// Saut de ligne suppl ementai re 
echo PHP_EOL; 

echo 'data: ' . ti me() . PHP_EOL ; 
echo 'data: kougel hof ' . PHP_EOL; 

?> 

Deux evenements DOM seront generes, car deux paquets de donnees independants 
sont recus. 

id 

Si un champ d'identifiant id: a ete recu dans le dernier message, alors le navigateur 
doit formuler la requete suivante avec un en-tete Last-Event-ID dont la valeur est 
celle du dernier identifiant. Cela afin de permettre la reprise d'un dialogue client-ser- 
veur. II appartient alors au script execute cote serveur de lire l'en-tete, par exemple 
avec $_SERVER[ ' HTTP_LAST_EVENT_ID ' ] en PHP et d'en tirer les consequences. 

I echo 'id: ' . time() . PHP_EOL; 
echo 'data: Blablabla ?'.PHP_EOL; 

Dans la majorite des situations, un identifiant correspondant au timestamp peut faire 
l'affaire. Chaque message recu sera done balise par cette valeur numerique, inevita- 
blement incrementee lorsque le temps s'ecoule. 

Tableau 12-3 Exemple de dialogue 



Ordre 


Champ id 


Last-Event-ID envoye 
par le navigateur 


Description 


Message 1 


id:1 31 2047282 


(aucun) 


Requete initiale, aucun id n'est transmis, car 
aucun n'a ete recu auparavant. 


Message 2 


id:1 31 2047285 


1312047282 


L'identifiant du message 1 est renvoye. 


Message 3 


id:1 31 2047288 


1312047285 


L'identifiant du message 2 est renvoye. 


Message 4 


id:1312047310 


1312047288 


L'identifiant du message 3 est renvoye. 
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Exemple avec utilisation d'id 

<?php 

header ( ' Content- type : text/event- stream ' ) ; 
echo 'id: ' .timeO .PHP_EOL; 

echo 'data: II est ' . date("H") . ' h ' .dated") ■ ' et ' . date("s") . ' s'; 

// Si 1 ' i denti f i ant precedent a ete transmis, il est affiche 
i f ("i sset ($_SERVER [ ' HTTP_LAST_EVENT_ID ' ] ) ) { 

echo ' . . . et j\'ai recu Last-Event-ID :'; 

echo $_SERVER [ ' HTTP_LAST_EVENT_ID ' ] ; 

} 

echo PHP_EOL; 

?> 

Lorsqu'il s'agit de ne kisser s'echapper aucun message, I'identifiant doit correspondre 
a une suite numerique : 1, 2, 3, 4, 5, etc. Si le serveur s'apercoit qu'il n'a pas recu de 
requete avec HTTP_LAST_EVENT_ID : 4, alors il peut presumer que le client ne l'a pas 
recu, et peut tenter de rectifier le tir avec l'evenement suivant n° 5. 

Le script PHP complet est trop complexe pour etre developpe ici, il peut s'articuler autour 
de sessions, de fichiers, d'une base de donnees SQL, pour garder la trace des dialogues : 
donnees et dernier identifiant envoye par le navigateur. Voici neanmoins une suggestion 
minimaliste basee sur une session memorisant le numero du dernier message envoye. 

Exemple de compteur avec une session 

<?php 

// Demarrage de la session 
session_start() ; 

header( ' Content-type : text/event-stream') ; 
// Initialisation 

if(!isset($_SESSION['sse_id'])) $_SESSION [ ' sse_i d ' ] = 0; 
echo 'id: ' . $_SESSI0N [ ' sse_id ' ] . PHP_E0L ; 

echo 'data: II est ' . date("H") . ' h ' .date("i ") . ' et ' . date("s") . ' s'; 

// Si I'identifiant precedent a ete transmis 
i f (i sset ($_SERVER [ ' HTTP_LAST_EVENT_ID ' ] ) ) { 

echo ' . . . et j\'ai recu Last-Event-ID :'; 

echo $_SERVER [ ' HTTP_LAST_EVENT_ID ' ] ; 
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// Si 1 'identifiant precedent est egal au compteur courant-1 
i f ($_SERVER [ ' HTTP_LAST_EVENT_ID ' ] ==($_SESSION [ ' sse_i d ' ] -1)) { 

echo ' ... tout va bien.'; 
} else { 

echo ' ... un message s\'est perdu !'; 

} 

} 

echo PHP_EOL; 

// Incrementation du compteur 
$_SESSION['sse_id']++; 

?> 



event 

Le marqueur event : associe les donnees envoyees dans data: a un evenement parti- 
culier. Ce n'est done plus 1' evenement message qui sera declenche, mais un autre 
dont le nom est donne par la valeur de la ligne event:. Par exemple, dans le cadre 
d'un webmail il serait tout a fait possible d'imaginer que des notifications « nouveau 
message important recu » ou « nouveau spam recu » puissent etre distinguees. 

<?php 

header ( ' Content- type : text/event-stream ' ) ; 

// Ti rage au sort, 1, 2 ou 3 ? 
$r = rand (1,3); 

// Evenement de type heure 
if($r==l) { 

echo 'event: heure' .PHP_EOL; 

echo 'data: II est ' . date("H") . ' h ' .date("i ") . ' et ' . date("s") . ' 
s' .PHP^EOL; 
} 

// Evenement de type bonjour 
if($r==2) { 

echo 'event: bonjour '. PHP EOL; 

echo 'data: Bonjour !'.PHP_EOL; 

} 

// Evenement standard 
if($r==3) { 

echo 'data: Juste un message .'. PHP_EOL ; 

} 

?> 
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Ce script PHP renvoie aleatoirement un evenement baptise « heure » avec pour 
donnee l'heure courante, un evenement baptise « bonjour » avec pour donnee une 
salutation amicale, et un evenement classique. 

II est alors necessaire de completer les gestionnaires d'evenements etablis cote client, 
notamment a l'aide de la methode addEventLi stener qui recoit en premier argument 
le nom de I' evenement, et en deuxieme la fonction de traitement. 

var sse = new EventSource("event . php") ; 

var infos = document. getElementById("infos") ; 

sse.addEventListener("heure" ,function(event) { 

i nfos . i nnerHTML += "<p cl ass=\"message heure\">"+event.data+"</p>" ; 

}); 

sse . addEventLi stener ("bonjour" , function (event) { 

i nfos . i nnerHTML += "<p cl ass=\"message\">"+event . data+"</p>" ; 

}); 
retry 

Le temps de reconnexion a une source est determine arbitrairement par le navigateur, 
il est par defaut de l'ordre de quelques secondes. Le script execute cote serveur peut 
signifier qu'il serait pertinent de se reconnecter rapidement si la frequence d'actuali- 
sation doit etre courte, ou bien a intervalles beaucoup plus espaces s'il souhaite 
menager les ressources ou qu'il n'a rien a declarer aussi regulierement. Le champ 
retry: determine ce delai, en millisecondes. 

Exemple de flux avec utilisation de retry 

<?php 

header( ' Content-type : text/event-stream') ; 
echo 'id: ' .time() .PHP_EOL; 

echo 'data: II est ' . date("H") . ' h ' .date("i ") . ' et ' . date("s") . ' 
s' .PHP_EOL; 

// Delai de reconnexion en ms 
Sretry = rand (1000, 1500) ; 
echo 'retry: ' .$retry.PHP EOL; 

?> 

Ce script indique au navigateur de se reconnecter entre 1000 et 1500 millisecondes 
apres une deconnexion. 
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Utiliser JSON 

Les donnees a envoyer ne sont pas toujours de simples phrases, citations d'Alphonse 
Allais ou valeurs numeriques. Elles sont bien souvent issues de scripts PHP produi- 
sant des resultats complexes (objets, tableaux) ou de bases de donnees. Pour les 
exploiter agreablement sans devoir les decouper en petits morceaux et les recoller 
ensuite, JSON est de mise. 

Exemple de flux avec JSON data-json.php 

<?php 

header ( ' Content- type : text/event-stream ' ) ; 

// Encodage d'un tableau PHP en JSON 
Sdata = j son encode ( 
array( 

'time'=>timeO , 

' al eatoi re ' =>rand() 

) 

); 

echo 'data: '. Sdata. PHP_EOL; 

?> 

Pour envoyer un objet JSON, la fonction j son_encode () est au service de tout un chacun 
a partir de PHP 5.2. Elle produit une linearisation, transferable via un message texte. 

<scri pt> 

var sse = new EventSource("data- json . php") ; 
var infos = document. getElementByld ("infos") ; 

sse . onmessage = function(event) { 

var donnees = JSON . parse (event . data) ; 

i nfos . i nnerHTML += "<p cl ass=\"message\">" ; 

i nfos . i nnerHTML += "Timestamp : "+donnees .time+"<br>" ; 

i nfos . i nnerHTML += "Nombre al eatoi re : "+donnees . al eatoi re ; 

i nfos . i nnerHTML += "</p>"; 

}; 

</scri pt> 

Cote client, la fonction JavaScript 3 SON . parse () convertit la chaine de texte JSON qui lui 
est donnee en argument vers un objet structure. Si cette fonction n'est pas disponible dans 
les anciens navigateurs, un framework tel que jQuery peut faire l'affaire en complement. 
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Prise en charge 



La detection de la presence des Server-Sent Events est aisee, avec le test de I'exis- 
tence du membre EventSource pour l'objet tentaculaire wi ndow. 

if (! !wi ndow. EventSource) { 

var source = new EventSource( ' event-source . php ') ; 
} else { 

// Utiliser une alternative (en Ajax par exemple) 

} 



Implementation 

Les premieres implementations d'Opera ont vu le jour avec la version 9, mais faisaient appel a un ele- 
ment HTML nomme <event-source>. 



Tableau 12-4 Tableau de support Server-sent Events 



Navigateur Version 


Mozilla Firefox 


6+ 


Apple Safari 


5+ 


Google Chrome 


6+ 


Opera 


11 + 


iOS 


4+ 



Version 



Android 




Opera Mobile 


11 + 


Opera Mini 




Internet Explorer 





Une alternative manuelle peut consister a utiliser la fonction JavaScript 
setlnterval () en combinaison avec XMLHttpRequest ou jQuery pour simuler un 
comportement approchant et charger periodiquement des donnees en provenance 
d'un serveur. 

La librairie jQuery.eventsource facilite la mise en place de cette API, et prevoit une 
telle alternative en Ajax pour les navigateurs l'ignorant encore. 



Ressource Librairie JavaScript JQuery.eventsource 

jQuery.eventsource 

► http://github.com/rwldrn/jquery.eventsource 



482 



Echange d'informations 
entre documents 
(Web Messaging) 

Des documents HTML qui communiquent entre eux ? Voila une riche 
idee ! Etudions ces messages et evenements interdocuments et comment la 
securite des echanges est assuree. 




Figure 13-1 Communication, communication ! 



HTML 5 - Une reference pour le developpement web 



Au-dela des dialogues client-serveur, une application web est parfois amenee a devoir 
communiquer entre differents documents HTML (fenetre courante, iframe, pop-up, 
etc.). Habituellement, les scripts de differentes pages sont uniquement autorises a 
acceder a chacun d'entre eux si les pages dependent du meme protocole (par exemple 
http://), du meme numero de port (par exemple 80) et du meme nom de domaine. 

L'API Web Messages met en place une communication simplified avec des evene- 
ments DOM et des messages au format texte, qui sont relativement proches du prin- 
cipe deploye par Server-Sent Events. Cette communication est possible interdo- 
maine, c'est pourquoi on l'appelle egalement en version originale Cross-document 
messaging. Elle fait preuve d'une grande souplesse, mais devient ainsi exposee a quel- 
ques risques. Des mesures de securite sont necessaires pour verifier la validite de la 
source emettant le message. Comme le disait l'oncle de Peter Parker (Spiderman), 
inspire par Socrate : « Un grand pouvoir implique de grandes responsabilites ». 



Ressource Specification Web Messaging au W3C et WhatWG 

► http://www.w3.org/TR/webmessaging/ 

► http://dev.w3.org/html5/postmsg/ 

► http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html 



II faut garder a l'esprit que ces echanges de messages concernent uniquement le cote 
client en JavaScript, pour un meme utilisateur et dans un meme navigateur. Toute 
autre communication necessitera de faire appel au serveur. 



Si cette API est supportee par le navigateur, l'objet wi ndow comprend une methode 
nommee postMessage(). C'est elle qui autorise l'envoi de messages texte depuis la 
fenetre courante vers les autres, quel que soit le domaine hebergeant la page de destina- 
tion. Un evenement DOM de type message, interface avec MessageEvent, est genere sur 
la fenetre de destination. II comporte le contenu texte du message dans sa propriete data. 



Fonctionnement 



Figure 13-2 

Schema global 




□ 



postMessageQ 




Document 
HTML 



Document 
HTML 
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Deroulement de l'envoi d'un message : 

1 Appeler la methode postMessageO depuis la page contenant 1'information a 
envoyer (stockee dans un formulaire, une variable JavaScript, etc.)- Cette fonction 
prend en arguments le message texte a envoyer et l'adresse destinataire, qui doit 
correspondre au minimum au nom de domaine ou a un caractere joker « * ». 

2 Dans le document destinataire, attraper l'evenement message. 

3 Verifier au prealable l'origine du message recu stockee dans la propriete origin. 

4 Traiter le texte recu dans la propriete data de l'evenement. 

La demonstration la plus efficace reste celle d'une page comprenant une zone de 
texte ainsi qu'un element <if rame> devant recevoir son contenu. 



<textarea> 



<iframe> 



Figure 13-3 

Schema global 



Je suis surwww.domaine1.com 




Le document principal, nomme simple-emetteur.html est heberge sur 
www.domainel.com tandis que l'iframe qui y est integree reste hebergee sur 
www . domai ne2 . com avec le fichier si mpl e-desti natai re . html . 

Code source de I'emetteur (simple-emetteur.html) 

<!doctype htm"l> 
<html lang="fr"> 
<head> 

<title>HTML5 : Web Messagi ng</ti tl e> 
<meta charset="utf-8"> 

<link rel="stylesheet" href="styles.css" type="text/css"> 

</head> 

<body> 

<div cl ass="wrap"> 

<p>Je suis sur www. domai nel.com</p> 
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<form i d="envoi "> 

<pxtextarea i d="message"x/textareax/p> 

<pxinput type="submi t" val ue="Envoyer"x/p> 
</form> 

<i frame src="http : //www . domai ne2 . com/web-messagi ng/simpl e- 
desti natai re . html " i d="i f rame"x/i f rame> 

</di v> 

<scri pt> 

// Memorisation de la fenetre destination dans une variable 

var destination = document. getElementByld('iframe') . contentWi ndow; 

// Redefinition de la validation du formulaire 
document. getElementById('envoi ') .onsubmit = function(event) { 
// Memorisation du texte dans une variable 
var texte = document . getEl ementById( ' message '). val ue ; 
// Envoi de la variable a la fenetre destination 
destination . pos tMessage (texte , "http : //www . domai ne2 . com") ; 
event. preventDefaultO ; 

}; 

</scri pt> 

</body> 
</html> 

Les elements principaux sont equipes d'attributs i d pour les cibler plus rapidement 
avec document. getEl ementByldO. L'evenement submit de validation du formulaire 
est redefini par une fonction faisant appel a postMessageO, et son comportement 
par defaut est inhibe grace a event . preventDefaultO. 

Le document iframe contient quant a lui un paragraphe d'introduction le presentant, 
et une liste <ul> pour la reception de messages. 

Code source destinataire (simple-destinataire.html) 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Web Messagi ng</ti tl e> 
<meta charset="utf-8"> 

<link rel="stylesheet" href="styl es . ess" type="text/css"> 

</head> 

<body> 

<p>Je suis sur www. domai ne2 . com</p> 
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<ul id="messages"x/ul> 

<scri pt> 

// Gestionnaire d'evenement 'message' 

if (typeof wi ndow. addEventLi stener != 'undefined') { 

window. addEventLi stener( ' message ' , reception, false); 
} else if (typeof window.attachEvent != 'undefined') { 

window.attachEvent('onmessage' , reception) ; 

} 

// Traitement de 1 ' evenement 
function reception (event) { 
// Verification de 1'origine 

i f (event . or i gi n ! == ' http : //www . domai nel . com ' ) { 

alert("Mauvaise origine"); 
} else { 

// Prise en compte du message 

var li = document . createEl ement( ' 1 i ') ; 

li.innerHTML = event. origin +' a dit : '+event.data; 

document . getEl ementById( ' messages ' ) . appendChi 1 d (1 i ) ; 

} 

} 

</scri pt> 

</body> 
</html> 

L'ecouteur attend un evenement message. II est conseille d'utiliser les ecouteurs 
addEventLi stener (et attachEvent pour les anciennes versions d'Internet Explorer) 
afin d'attraper l'evenement message. 

Figure 13-4 

Resultat obtenu Je suis sur www.domainel .com 



N'est-ce pas. 



Je suis surwww.domaine2.com 

» http://www.domaine1.com a dit : C'est magique I 
• http://www.damaine1.cam a dit : N'est-ce pas. 
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La fonction recepti on () est declenchee des que cet evenement Test aussi. Elle recoit en 
parametre une copie de l'objet evenement. La propriete origin en est examinee pour 
verifier si elle correspond bien au domaine duquel I'information est attendue : 
www.domainel.com. Si tel est le cas, un nouvel element <1i> est cree dynamiquement 
pour etre ajoute a la liste messages et son contenu texte est modifie pour recevoir la valeur 
de la propriete data de 1' evenement, c'est-a-dire le texte du message lui-meme. 



Securite 

Verification de l'origine 

Une application web reposant sur cette fonctionnalite se doit de verifier - autant que 
le permet la securite de JavaScript - la provenance du message quelle recoit. 

A ces fins, il convient de faire une verification sur la propriete . ori gi n de chaque mes- 
sage recu, pour s'assurer que le domaine emetteur correspond bien a celui qui est attendu, 
et qu'il en est de meme de l'adresse - surtout si le domaine source est susceptible 
d'heberger du code qui n'est pas totalement sous controle. Sans cela, un farceur pourra 
sans difficulte emettre des messages depuis toute page hebergee sur un autre domaine. 

La fonction postMessageO contient aussi un mecanisme evitant d'envoyer des don- 
nees potentiellement confidentielles a un domaine qui ne serait pas le bon, et qui 
pourrait les intercepter (puis les envoyer a un serveur en Ajax). Cela correspond a son 
deuxieme argument pour lequel il faut eviter d'utiliser le joker « * » comme destina- 
tion. Pour restreindre l'envoi aux cibles de meme origine sans la specifier explicite- 
ment, il est possible d'indiquer « / ». 

Verification du contenu 

La validation de l'emetteur n'est qu'une premiere etape. Elle ne garantit pas que le 
contenu du message est totalement inoffensif. Si celui-ci est amene a etre injecte 
dans le DOM de la page destination, il faut faire attention a ce qu'il contient. Une 
balise <scri pt> pourrait tout a fait etre utilisee a des fins d'injection et executee ins- 
tantanement. 

II faut done proceder aux memes verifications que celles mises en place cote serveur 
et supprimer, voire traiter, une syntaxe qui pourrait porter prejudice au document 
recepteur. Si le message doit etre affiche, ne pas utiliser innerHTML mais plutot 
textContent, et innerText evite une interpretation HTML. 
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Donnees transferees et JSON 

Les messages sont concus pour transporter du texte, cependant rien n'empeche de 
vehiculer des structures de donnees plus complexes a l'aide de JSON. 

Code source emetteur (json-emetteur.html) 

<!-- ... — > 

<p>Je suis sur www.domainel.com</p> 

<form id="envoi"> 

<pxtextarea "i d="message"x/textareax/p> 

<pxinput type="submi t" val ue="Envoyer"x/p> 
</form> 

<i frame src="http : //www . domai ne2 . com/web-messagi ng/ j son- 
desti natai re . html " i d="i f rame"x/i f rame> 

</di v> 

<scri pt> 

var destination = document. getElementById('if rame') . contentWi ndow; 

document. getElementByldC envoi ') .onsubmit = functi on (event) { 
var texte = document . getEl ementById( ' message '). val ue ; 
// Creation d'un objet compose de deux proprietes 
var objet = {messagetxt: texte, date: new Date()}; 
// Conversion de 1 'objet en chaine texte au format JSON 
var jsondata = JSON. stringify (objet) ; 
// Envoi de la chaine texte 

desti nation . postMes sage (jsondata, "http: //www. domai ne2 . com") ; 
event . preventDefaul t() ; 

}; 

</scri pt> 
<!-- ... — > 

Cette fois-ci, les donnees sont structurees avant l'envoi dans un objet. La propriete 
messagetxt recoit le texte tandis que la propriete date recoit une valeur de la date 
courante. La methode JSON.strinifyO convertit le tout en chaine de texte dans la 
variable jsondata, pour autoriser sa transmission par postMessage(). 

Du cote de www. domai ne2 . com, le document destinataire respecte la meme composi- 
tion que precedemment mais traite le resultat d'une maniere differente. 
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Code source destinataire (json-destinataire.html) 



<p>Je sin's sur www. domai ne2 . com</p> 
<ul id="messages"x/ul> 
<scri pt> 

if (typeof wi ndow. addEventLi stener != 'undefined') { 
wi ndow. addEventLi stenerC ' message ' , reception, false); 

} else if (typeof wi ndow. attachEvent != 'undefined') { 
window. attachEvent('onmessage' , reception) ; 

} 

// Traitement de l'evenement 
function reception (event) { 
// Verification de l'origine 

i f (event . ori gi n ! == ' http : //www . domai nel . com ' ) { 

al ert("Mauvai se origine"); 
} else { 

// Creation d'un objet a parti r de la chaTne 1S0N 

var obj = JSON . parse (event . data) ; 

var li = document . createEl ement( ' 1 i ') ; 

// Creation d'une ligne a parti r des proprietes de 1 'objet 
1 i . textContent = obj.date+' : '+obj . messagetxt ; 
document . getEl ementByld ( ' messages ' ) . appendChi 1 d (1 i ) ; 

} 



} 

</scri pt> 



Figure 13-5 

Resultat obtenu 



Je suis surwww.domaine1.com 



C'est encore mieux avec un deuxieme test. 



Envoyer 



Je suis surwww.domaine2.com 

• 201 1-07-31T23:56:56.710Z : JSON, il n y a que 
ca de vrai ! 

♦ 2Q11-07-31T23:57:06.990Z: C'est encore mieux 
avec un deuxieme test. 
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Ce nest plus un simple texte qui doit etre injecte, mais un objet dont les deux pro- 
prietes peuvent etre considerees separement. La date d'envoi (determinee par 
www.domainel.com) precede le texte du message dans la liste. JSON est ainsi mis a 
contribution pour echanger des objets plus complexes qu'une simple chaine de texte. 



Source et reponse 

Etant donne que l'envoi reste dispatche de maniere asynchrone, il n'est pas possible 
pour l'appelant de detecter si le gestionnaire d'evenement destination ecoutant pour 
un message lance une exception. En revanche, la page peut envoyer une reponse en 
retour, car l'evenement comprend dans sa propriete source une reference a la fenetre 
d'origine. De surcroit, l'adresse de la cible est deja connue par la propriete origin. 

// Reponse a l'appelant 

e . source . postMessage( 'OK ' , e . ori gi n) ; 

Du cote de l'emetteur, la procedure d'envoi reste semblable. En revanche, le docu- 
ment se voit lui aussi muni d'un gestionnaire d'evenement message. 

Code source emetteur (feedback-emetteur.html) 

<!-- ... — > 

<p>Je suis sur www.domainel.com</p> 

<form id="envoi"> 

<pxtextarea i d="message"x/textareax/p> 

<pxinput type="submi t" val ue="Envoyer"x/p> 
</form> 

<i frame src="http://www.domaine2 . com/web-messaging/ feedback- 
desti natai re . html " i d="i f rame"x/i f rame> 

<p id="retour"x/p> 

</di v> 

<scri pt> 

var destination = document. getElementById('if rame') . contentWi ndow; 

document. getElementById('envoi ') .onsubmit = function(event) { 
var texte = document . getEl ementById( ' message '). val ue ; 
desti nation . postMessage (texte , "http : //www. domai ne2 . com") ; 
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document . getEl ementById( ' retour '). textContent = ''; 
event. preventDefault() ; 

}; 

// Reception des messages en retour 
if (typeof wi ndow. addEventLi stener != 'undefined') { 

wi ndow. addEventLi stenerC ' message ' , reception, false); 
} else if (typeof wi ndow. attachEvent != 'undefined') { 

window. attachEvent('onmessage' , reception) ; 

} 

// Traitement des messages en retour 
function reception (event) { 

i f (event . ori gi n ! == ' http://www. domai ne2 . com ' ) { 

al ert("Mauvai se origine"); 
} else { 

if(event.data=='OK') { 

document . getEl ementByldC retour') .textContent 
} else { 

document. getEl ementByldC retour') .textContent 

} 

} 

} 

</scri pt> 
<!-- ... --> 

La mise en place des ecouteurs et de la fonction de reception suit le meme chemin, 
en revanche un test est mene sur le contenu du message recu en retour. Si celui-ci 
correspond a la valeur « OK », alors I'emetteur considere que tout s'est bien deroule 
car le destinataire lui a renvoye un accuse de reception. 

Code source destinataire (feedback-destinataire.html) 

<!-- ... --> 

<p>De suis sur www. domai ne2 . com</p> 
<ul id="messages"x/ul> 
<scri pt> 

if (typeof wi ndow. addEventLi stener != 'undefined') { 
wi ndow. addEventLi stener( ' message ' , reception, false); 

} else if (typeof window. attachEvent != 'undefined') { 
wi ndow. attachEvent( ' onmessage ' , recepti on) ; 

} 



= 'Message recu ' ; 
= ' Erreur ' ; 
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function reception (event) { 

i f (event . origi n ! ==' http : //www. domai nel . com ' ) { 

alert("Mauvaise origine"); 
} else { 

var li = document . createEl ement( ' 1 i ') ; 

1 i . textContent = event. origin+' : '+event.data; 

document . get El ementById( ' messages ' ) . appendChi 1 d(l i) ; 

// Reponse a 1 'appelant 

event. sou rce.postMessageC OK' ,e. origin) ; 

} 

} 

</scri pt> 
<!-- ... — > 

L'objet evenement e dispose d'une reference a la fenetre source dans la propriete 
source. Elle peut done servir a renvoyer un message dans le sens inverse via 
postMessage(). Pour eviter d'avoir a specifier manuellement la destination, il suffit 
d'utiliser la valeur de e. origin pour connaitre l'adresse de l'emetteur a qui envoyer 
l'accuse de reception. 



Figure 13-6 

Resultat obtenu j e su \ s sur www.domainel .com 



Hello domaine2 je suis dc-r^ainel et j aimerais cien avoir Lin accuse 
de reception de mon envoi. 



Envoyer 




Je suis surwww.domaine2.com 

• http://www.damaine1.cam : Hella domaine2,je 
suis damainel etj'aimerais bien avoir un accuse 
de reception de mon envoi. 



Message recu 
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Prise en charge 



Navigateur 



Tableau 13-1 Tableau de support Web Messaging 
Version 



Mozilla Firefox 


3+ 


Internet Explorer 


8+ 


Apple Safari 


4+ 


Google Chrome 


1 + 


Opera 


9+ 



Navigateur Version 


Android 


2.1 + 


iOS 


3.2+ 


Opera Mini 


5+ 


Opera Mobile 


10+ 



La librairie JavaScript easyXDM fournit une alternative pour les navigateurs ne sup- 
portant pas nativement postMessageO, avec un support d'Opera 9 qui implementait 
cette API d'une autre maniere, et un repli vers FlashTransport, HashTransport ou 
FrameElementTransport. 



Ressource Librairies 

easyXDM 

► http://easyxdm.net/ 
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Communication en temps reel 
(Web Sockets) 



Maintenir un dialogue bidirectionnel garantit la rapidite des applications 
web. Voyons comment est mise en place la persistance d'une connexion 
entre navigateur et serveur, et comment sont echanges les messages. 




Figure 14-1 Alio ? 



HTML 5 - Une reference pour le developpement web 



Les communications en temps reel sont desormais une necessite, en premier lieu pour le 
Web qui est devenu le plus fort pourvoyeur d'echanges entre humains. Avec la venue des 
applications web transcendant les banales pages statiques, les developpeurs ont le besoin de 
reproduire en HTML ce qui existe deja du cote des systemes d'exploitation : des canaux 
bidirectionnels et connectes en permanence, que Ton nomme plus prosai'quement les 
« sockets » avec le protocole TCP/IP. Ces couches de bas niveau sont elles-memes cou- 
ramment exploitees par tous les programmes souhaitant etablir une connexion TCP : les 
navigateurs eux-memes, les clients de messagerie, les services de partage de fichiers, les 
logiciels de videoconference, les jeux massivement multijoueurs, les radios en ligne, etc. 

L'API Web Sockets va au-dela de Server-Sent Events et propose I'acces a ces canaux 
directement au sein du navigateur, avec les gestionnaires d'evenements en JavaScript. 
Elle est vouee a l'etablissement de connexions persistantes et bidirectionnelles pour des 
applications web qui ont besoin de communiquer en temps reel avec le serveur : chat, 
diffusion d'informations sans attente (cours de la Bourse), jeux en reseau, notifications 
immediates, edition collaborative de documents en ligne, flux de donnees variees, etc. 

Certains artifices ont ete developpes grace a Ajax et a l'objet XMLHttpRequest ou aux 
iframes pour apporter un dynamisme aux contenus et les rafraichir periodiquement sans 
devoir operer un rechargement total du document HTML. lis sont neanmoins peu per- 
formants et peu adaptes. Sans Web Socket, le navigateur fonctionne en mode deconnecte. 
C'est lui qui doit regulierement initier une nouvelle connexion, formuler une requete pour 
savoir si de nouvelles donnees l'attendent, les recevoir le cas echeant et fermer la connexion 
apres le chargement de la page. On nomme cette facon de proceder le « polling ». 

Avec les Web Sockets, les en-tetes etablissant la connexion sont reduits pour plus de 
souplesse et de reactivite. Limpact sur la bande passante est amoindri par l'utilisation 
d'une encapsulation legere. Cela signifie qu'il faut echanger moins de donnees com- 
plementaires pour gerer la connexion par rapport aux seules donnees utiles a trans- 
ferer. Le serveur peut envoyer des donnees de sa propre initiative pour faire du push 
tandis que le « socket web » reste a son ecoute. Par ailleurs, la solution est prevue 
pour traverser les firewalls et les proxies. Tous ces avantages font des Web Sockets 
une alternative performante et efficace au polling. 

Leur seul inconvenient est de necessiter un serveur quelque peu specialise qui s'eloigne 
des traditionnels services mis a disposition par les applications HTTP. La mise en place 
est plus lourde, car la plupart des solutions d'hebergement actuelles ne sont pas equipees 
de langages fonctionnant par evenements, a l'ecoute constante de connexions entrantes. 



Figure 14-2 

Schema de connexion 




Connexion persistante 




Navigateur 
(Web Sockets) 



Serveur Base de 

donnees 
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Ressource Specification des Web Sockets 

W3C 

► http://dev.w3.org/html5/websockets/ 

► http://www.w3 .org/TR/websockets/ 
WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/complete/network.html 
Protocole 

► http://www.whatwg.org/specs/web-socket-protocol/ 



Cote serveur 

Avant de decouvrir la magie des Web Sockets, il convient de leur dormer un serveur 
auquel se connecter. Sans service approprie a l'ecoute de connexions, point de dia- 
logue possible. 

De nombreuses solutions existent, ecrites en Java, PHP, Ruby, C#, et meme en 
JavaScript execute cote serveur avec Node . js. Ce dernier a le vent en poupe et repre- 
sente le moyen le plus approprie pour la programmation evenementielle qui sied aux 
sockets. Neanmoins, cette plate-forme est moins repandue que PHP. Si vous dis- 
posez d'un serveur dedie, vous avez la liberte d'installer ce que vous voulez dessus. 
Mais si vous disposez d'un serveur web avec un hebergement mutualise (seul acces au 
FTP), c'est la plate-forme LAMP qui sera operationnelle. 

C'est cette solution qui sera decrite dans ce chapitre par souci d'universalite et de 
simplicite, a l'aide de la librairie phpwebsock 

Ressource Web Sockets avec PHP 

phpwebsocket 

► http://code.google.eom/p/phpwebsocket/ 

phpwebsocket 

Sur le site hebergeant le projet, le code source se trouve dans l'onglet Sou rce, sous-menu 
Browse, repertoire trunk puis phpwebsocket. Le fichier principal est 
websocket . cl ass . php. Le lien view rawfile donne acces au telechargement du contenu. 

Ce script PHP reste minimaliste, mais parfait pour l'etude de son fonctionnement interne 
et quelque peu de personnalisation. II suppose tout de meme un acces au serveur en ligne 
de commande, par exemple via SSH, pour lancer une execution persistante de PHP. 

php -q websocket. demo. php 
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L'option -q est facultative. Elle signifie qu'il est inutile d'envoyer les en-tetes HTTP 
conventionnels a la ligne de commande, notamment Content-type. 

Source du serveur 

<?php 

require "websocket . cl ass . php" ; Q 

$master = new WebSocket ("0. .0 . 0" , 1337) ; 

?> 

L'inclusion de phpwebsocket se fait grace a une instruction include (voire requi re) 
du fichier fourni Q. 

La creation du socket passe par l'instanciation d'un objet WebSocket ©. Les deux 
arguments demandes sont l'adresse sur laquelle ecouter, ici 0.0.0.0 en IPv4 qui 
ecoute sur toutes les adresses et qui peut etre remplace par 1 ocal host dans le cas d'un 
developpement local, ainsi que le port associe. Ce port sera precise a la connexion 
cote client, et doit etre ouvert si le serveur est equipe d'un firewall. Son choix est 
libre, pour peu qu'il ne soit pas deja utilise par un autre service, de preference avec un 
nombre superieur a 1023 pour eviter la tranche des ports les plus celebres, voire supe- 
rieur a 49151 pour eviter ceux qui pourraient etre enregistres. 

Personnalisation 

Par defaut, l'objet WebSocket prevu dans cette librairie renvoie tout ce qui lui est 
transmis, ce qui est d'ailleurs le but du fichier de demonstration fourni 
« websocket.demo.php ». Ce comportement peut suffire dans le cadre des tests ini- 
tiaux, mais reste d'un interet limite. 

Pour le personnaliser, etendons la classe WebSocket. 
<?php 

// Execution en ligne de commande : php -q <nomdufi chi er> . php 

// Inclusion de la librairie phpwebsocket 
require "websocket . cl ass . php" ; 

// Extension de WebSocket 
class ChatBot extends WebSocket { 
function process($user,$msg) { 
$thi s->say("< " . $msg) ; 
switch($msg){ 
case "hello": 

$thi s->send($user->socket , "Bonjour") ; 
break; 

case "date": 
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$thi s->send($user->socket , "Nous sommes le " . date("d/m/Y")) ; 
break; 
case "bye": 

$thi s->send($user->socket , "Au revoi r") ; 

$thi s->disconnect($user->socket) ; 
break; 
defaul t : 

$this->send($user->socket, "Pas compris !"); 
break; 

} 

} 

} 

Smaster = new ChatBot("0 . . . 0" , 1337) ; 
?> 

Ce serveur minimal, inspire de l'exemple fourni avec la librairie, recoit des messages 
au format texte. II repond - poliment - aux commandes « hello », « date » et « bye ». 
Cette derniere provoque la fermeture de la connexion. C'est tout ce qu'il faut pour 
pouvoir mettre en place un honorable Web Socket cote navigateur. 

Evolution 

Cet exemple n'etant prevu que pour des echanges de chaines de caracteres, il vous 
incombe de le faire evoluer pour manipuler des donnees plus complexes, binaires ou 
mathematiques, selon le but de l'application web. 

Pour imaginer du push concret et d'autres fonctions sur la seule initiative du serveur, il ne 
faut pas hesiter a se tourner vers des developpements plus foumis et d'autres langages. Seul 
le dialogue etabli par le protocole compte, les implementations peuvent etre multiples. 



Ressource Serveurs Web Sockets 




Node.js 


Kaazing WebSocket Gateway (Windows, Linux, 


► http://nodejs.org/ 


Unix, Mac) 


Socket.10 


► http://www.kaazing.com/download.html 


► http://socket.io/ 


Nugget (C#) 


WebSocket-Node 


► http://nugget.codeplex.com/ 


► https://github.com/Worlize/WebSocket-Node 


pywebsocket (Serveur standalone et module Apa- 


phpwebsocket (PHP) 


che) 


► http://code.google.eom/p/phpwebsocket/ 


► http://code.google.eom/p/pywebsocket/ 


jWebSocket (Java) 


WaterSpout Server (PHP) 


► http://code.google.eom/p/jwebsocket/ 


► http://www.spoutserver.com/ 



Le protocole de communication etant soumis a de frequentes ameliorations, il est 
probable que les librairies devront evoluer et s'adapter en consequence pour en sup- 
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porter plusieurs versions, dans les limites des contraintes de securite. Un perfection- 
nement du protocole prevoit une integration de la compression. 

La librairie phpwebsocket utilisee dans cette demonstration connait une des pre- 
mieres versions de protocole, utilisee par Chrome, mais ne peut - dans son etat 
actuel - etablir de dialogue avec Firefox, car la poignee de main (ou handshake) se 
deroule differemment. Neanmoins, les modifications a apporter ne remettent pas en 
cause l'essentiel du script et autorisent une evolution en douceur. 



Cote navigateur 



La specification definit l'interface WebSocket pour l'etablissement de la connexion, la 
gestion des evenements message, des erreurs et de la deconnexion. 



Propriete ou methode 



Tableau 14-1 Apercu de l'interface WebSocket 
Description 



url 


Contient I'adresse de connexion, initialement passee au constructeur. 


onopen 


Evenement declenche a I'ouverture de la connexion. 


onmessage 


Evenement declenche a la reception d'un message. 


onerror 


Evenement declenche lors d'une erreur. 


onclose 


Evenement declenche lors de la fermeture de la connexion. 


send(data) 


Envoie des donnees, avec data de type DOMString (texte), ArrayBuffer ou Blob. 


closeC) 


Ferme la connexion. 


readyState 


Etat courant de la connexion, avec pour valeurs : 

- WebSocket . CONNECTING : en cours de connexion ; 

- WebSocket . OPEN : connexion etablie ; 

- WebSocket . CLOSING : en voie de deconnexion ; 

- WebSocket . CLOSED : socket deconnecte. 


bufferedAmount 


Quantite de donnees en attente dans le tampon d'envoi. 


bi naryType 


Forme de traitement des donnees binaires recues : 

- "blob" : renvoyer en tant que Blob (Binary Large Object) ; 

- "arraybuff er" : renvoyer en tant qu'ArrayBuffer. 


extensions 


Extensions potentiellement determinees par le serveur. 


protocol 


Sous-protocole potentiellement determine par le serveur. 



LAPI se veut minimaliste, il n'est pas besoin d'utiliser toutes ces proprietes et 
methodes pour sen servir, meme si cela reste un plus. 
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Application HTML 

Pour exploiter ces differentes fonctions et le script d'ecoute mis en place cote serveur, 
il suffit d'une page prevue pour afficher les messages recus et en envoyer. 

Figure 14 3 Journal readyState : 

Interface de base 



Envoyer | |OK 

Commandes 
hello : saluer 
date : demander la date 
bye ou ciao : quitter 



Decouvrons sans plus attendre le code source complet. Celui-ci servira de base a 
l'analyse du fonctionnement de l'interface WebSocket. 

Code source HTML complet 

<!doctype htm"l> 
<html lang="fr"> 
<head> 

<title>HTML5 : Web Sockets</title> 
<meta charset="utf-8"> 

<1 n nk rel="stylesheet" href="sty1es.css" type="text/css"> 

</head> 

<body> 

<div cl ass="wrap"> 
<form> 

<p id="readyState">readyState : <span i d=" rs">&nbsp ; </spanx/p> 

<pxstrong>Journal </strongx/p> 
<div name="log" id="log"x/di v> 

<P> 

<1 abel for="texte">Envoyer</l abel > 

<input type="text" name="texte" id="texte"> 
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<input type=" submit" value="OK" id="va~lid"> 
</p> 

<p><strong>Commandes</strongx/p> 
<ul> 

<1 ixkbd>hello</kbd> : saluer</li> 
<lixkbd>date</kbd> : demander la date</li> 
<1 ixkbd>bye</kbd> ou <kbd>ci ao</kbd> : quitter</li> 
</ul> 

</form> 
</di v> 

<scri pt> 

var ws = nul 1 ; 

// Creation d'un nouveau socket Q 

// (pour Mozilla avec version prefixee) 

if ( 'MozWebSocket ' in window) { 

ws = new MozWebSocket("ws://www.mondomaine.com:1337/web-sockets/ 
phpwebsocket/chat . php") ; 

// (pour les autres implementations sans prefixe) 
} else i f ( 'WebSocket ' in window) { 

ws = new WebSocket("ws://www.mondomaine.com:1337/web-sockets/ 
phpwebsocket/chat . php") ; 



// Si un objet a bien ete initialise 
if(typeof ws !=='undefined') { 

// Indication de 1'etat 

var rs = document . getEl ementById( ' rs ') ; 

// Lors de l'ouverture de connexion @ 
ws.onopen = function() { 

log("Socket ouvert"); 

rs.innerHTML = thi s . readyState ; 

}; 

// Lors de la reception d'un message Q 
ws.onmessage = function(event) { 

// Ajout au journal du contenu du message 

log("< "+event.data) ; 

rs.innerHTML = thi s . readyState ; 

}; 
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// Lors d'une erreur de connexion Q 
ws.onerror = function(event) { 

"logC'Erreur de connexion"); 

rs.innerHTML = thi s . readyState ; 

}; 

// Lors de la fermeture de connexion Q 
ws.onclose = function(event) { 
if (event .wasClean) { 

log("Socket ferme proprement") ; 
} else { 

log("Socket ferme"); 

if (event .reason) 1 og(event . reason) ; 

} 

rs.innerHTML = thi s . readyState ; 

}; 

// Evenement submit du formulaire 

document. getElementsByTagName('form') [0] .onsubmit = function(event) { 

var texte = document . getEl ementById( ' texte ') ; 

// Envoi de la chaine texte 
ws. send (texte. value) ; 
log("> "+texte. value) ; 

// Mise a zero du champ et focus 
texte. focus() ; 
texte . val ue = ' ' ; 

// Empeche de valider le formulaire 
event . preventDef aul t() ; 

}; 

} else { 

alert("Ce navigateur ne supporte pas Web Sockets"); 



// Fonction d'ajout au journal 
function log(txt) { 

document. getElementByld('log') .innerHTML += txt+"\r\n"; 

} 

</scri pt> 

</body> 
</html> 
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Les principales actions menees par le script integre a la page sont : 

• la creation d'un nouvel objet WebSocket ; 

• l'association de fonctions aux evenements en provenance du socket ; 

• l'association d'une fonction a l'evenement submit du formulaire pour envoi des 
donnees contenues dans le champ <i nput> 0. 

Voyons ces actions en detail. 

Se connecter 

La connexion est directement etablie des la creation d'un objet WebSocket. Le constructeur 
recoit en argument l'adresse de connexion. Celle-ci ne debute pas par http://, mais bien 
par ws : // suivi du nom du serveur, du port et du chemin hebergeant le service interroge. 

Nouveau Web Socket 

ws = new WebSocket ("ws : //www.mondomai ne . com: 1337/web-sockets/ 
phpwebsocket/chat . php") ; 

WebSocket etant membre de l'objet racine window, le script tente de detecter sa pre- 
sence en amont. De jeunes versions de Firefox prefixent l'interface avec 
MozWebSocket, c'est pourquoi le script tente egalement cette detection, et le cas 
echeant l'initialisation avec cette denomination. 

Evenement a la connexion 

ws.onopen = functionO { 
"logC'Socket ouvert"); 
rs.innerHTML = thi s . readyState ; 

}; 

L'evenement onopen etant declenche des I'ouverture du canal de communication, il 
est possible de sen servir pour afficher une confirmation, et d'en profiter pour mettre 
a jour I'etat de la connexion affiche sur la page. Dans le cas present, il s'agit de la 
valeur numerique, mais elle pourrait etre remplacee par une image pour un rendu 
plus user-friendly. 

Envoyer des donnees 

La methode send() est chargee de l'envoi des messages au socket. Au travers de 
l'exemple courant, elle transmet le contenu d'une variable qui recupere au prealable la 
valeur d'un champ texte. 

Envoi d'un message texte 

var texte = document. getElementByld('texte') ; 
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// Envoi de la chaine texte 
ws . send(texte . val ue) ; 
log("> "+texte. value) ; 

Differents types de variables sont prevues par la specification, en premier lieu les 
chaines de texte (DOMStn'ng) rapidement implementees par les navigateurs, puis les 
formats plus complexes : ArrayBuffer et Blob, qui pechent encore un peu par leur 
manque de support. 

Qu'a cela ne tienne, JSON peut encore voler a la rescousse, etant donne qu'il est lui- 
meme un format structure base sur du texte. 

Recevoir des messages 

La reception d'un message suit les principes decrits pour les API Server-sent Events 
et Web Messaging. C'est l'evenement message qui est declenche, pour lequel il est 
possible de redefinir la propriete onmessage de l'interface WebSocket. 

Reception d'un message 

ws. onmessage = function (event) { 

// Ajout au journal du contenu du message 

log("< "+event . data) ; 

rs . i nnerHTML = thi s . readyState ; 

}; 

Gerer les erreurs 

Anticiper les erreurs, c'est renseigner l'utilisateur, et ne pas s'en faire un ennemi. 
L'evenement error est declenche au moment opportun et doit etre pris en compte, 
ne serait-ce que pour afficher un simple message informatif. 

Gestion de l'evenement erreur 

ws.onerror = function(event) { 
log("Erreur de connexion"); 
rs.i nnerHTML = thi s . readyState ; 

}; 

On en profite la aussi pour mettre a jour la valeur de readyState sur la page. 

Fermer la connexion 

La methode close porte bien son nom, c'est elle qui coupe le gaz, ferme les fene- 
tres et met la cle sous le paillasson. 
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Mettre fin a la connexion active 
ws .close() ; 

A la fermeture, l'evenement genere est de type CloseEvent. II dispose des proprietes 
suivantes : 



Tableau 14-2 Apercu de I'interface WebSocket 



Proprietes 


Description 


Type 


wasClean 


La connexion a-t-elle ete fermee de maniere « propre » ? 


booleen 


code 


Code retour des conditions de deconnexion. 


numerique 


reason 


Raison de la fermeture, en mode texte comprehensible par un humain. 


texte 



Si ces proprietes sont correctement renseignees par le navigateur, l'evenement close 
peut les employer pour connaitre les raisons de la deconnexion. 



Gestion de l'evenement de deconnexion 

ws.onclose = function (event) { 
i f (event .wasCl ean) { 

log("Socket ferme proprement") ; 
} else { 

log("Socket ferme"); 

if(event. reason) log(event. reason) ; 

} 

rs . i nnerHTML = thi s . readyState ; 

}; 



Journal readyState : £ 

Socket ouvert 

> hello 

< Bonjour 

> date 

< Nous sommes le 05/08/201 1 

> bye 

< Au revoir 
Socket ferme 



Envoyer || | |OK 

Commandes 
hello : saluer 
date : demander la date 
bye ou ciao : quitter 



Figure 14-4 

Interface de base 
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Si le serveur ferme la connexion de sa propre initiative ou faillit a sa noble mission, 
l'evenement est genere et l'application web peut prendre la decision qui s'impose : 
notifier l'utilisateur, eventuellement sauvegarder les donnees qui n'auraient pas ete 
envoyees avec Web Storage pour les synchroniser ulterieurement. 

Par la symbiose de ces quelques methodes, evenements et proprietes, l'API Web Sockets 
parvient a construire un reel dialogue client/serveur au sein meme de HTML. 

Aller plus loin 

Les Web Sockets ont ete penses pour offrir tout un panel de fonctionnalites aux 
applications web : transmettre les coordonnees d'un pinceau en temps reel pour un 
dessin collaboratif, charger des images et autres ressources medias, manipuler des 
donnees binaires et les echanger avec tous les utilisateurs connectes au service, etc. 

D'un point de vue technique, il incombe au serveur de gerer le relais des informations 
entre les utilisateurs connectes, ainsi que leur identification. Lutilisation de blocs try/ 
catch en JavaScript est envisageable pour ameliorer la gestion des exceptions pouvant 
survenir dans tout dialogue de ce type. De meme, le script pourrait tenter d'etablir une 
nouvelle connexion s'il detecte une deconnexion suite a l'evenement error ou close. 

Pour tout socket generant un fort trafic, la propriete bufferedAmount doit etre exa- 
minee de pres. C'est elle qui contient la quantite d'octets en attente d'envoi, et qui 
peut renseigner sur la qualite de la connexion et son debit. II serait inutile de sur- 
charger le tampon continuellement si toutes les donnees ne peuvent etre transmises 
en temps voulu. La surveillance reguliere de bufferedAmount est preferable pour 
s'assurer de la capacite du socket a transmettre de nouvelles informations. 



Prise en charge 

L'API Web Sockets a ete integree par anticipation dans deux navigateurs parmi les plus 
reactifs, Google Chrome et Mozilla Firefox, mais s'est vue desactivee temporairement 
pour des raisons de securite. Le protocole sous-jacent comprenait des failles pouvant 
compromettre la connexion et les donnees transferees. Par chance, cela n'affectait pas 
l'API client qui reste toujours la meme. Apres avoir planche sur le sujet et mis a jour le 
protocole, les navigateurs sont a nouveau prets a activer Web Sockets. 

Firefox 4 et 5, Opera 11, Chrome 6+ et Safari 5 disposent d'un support obsolete de la ver- 
sion « hixie-76 » du protocole, tandis que Firefox 6 comprend la version « hybi-07 » qui 
n'est pas retrocompatible, et Firefox 7+ la version « hybi-10 » tout comme Chrome 14. 
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Tableau 14-3 Tableau de support Web Sockets 



Navigateur 


Version 


Mozilla Firefox 


6+ (desactive par defaut dans 4-5) 


Apple Safari 


5+ 


Google Chrome 


4+ 


Opera 


- (desactive par defaut dans 11-12) 


Android 




iOS 


4.2+ 


Opera Mini 




Opera Mobile 


(desactive par defaut dans 11) 


Internet Explorer 


10+ 



Rappel 

Consultez le site d'accompagnement de I'ouvrage pour voir revolution des prises en charge par les navi- 
gateurs. 

Des librairies de remplacement ont le merite d'exister, meme si elles ne sont pas aussi 
performantes, completes et legeres. Socket.IO est la plus celebre, ideale pour unifor- 
miser les differences de supports avec des alternatives embarquees telles qu'Adobe 
Flash Socket, ActiveX (pour Internet Explorer), Server-Sent Events (pour Opera), 
et XMLHttp Request. 



Ressource Librairies alternatives pour Web Sockets 

Socket.IO 

► http://socket.io/ 

► http://labs.leamboost.com/socket.io/ 
Web-Socket-js 

► http://github.com/gimite/web-socket-js/ 
EasyWebSocket 

► http://easywebsocket.org/ 
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Une API en stock pour JSON et sa toison d'or, afin de doter le navigateur 
d'une memoire locale ou de session. 




Figure 15-1 Pour tout et n'importe quoi 
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Web Storage (ou DOM Storage) ajoute la capacite au navigateur de stocker et orga- 
niser des donnees locales. Ce concept initialement integre a la specification 
HTML 5, fait desormais l'objet d'une specification separee. 



Ressource Specification Web Storage par le W3C et WhatWG 

► http://www.w3.org/TR/webstorage/ 

► http://dev.w3.org/html5/webstorage/ 

► http://www.whatwg.org/specs/web-apps/current-work/complete/webstorage.html 
Pourquoi Web Storage ne figure pas directement dans la specification HTML 5 ? 

► http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/201 1 -January/0301 10.html 



Les beneficiaires de cette avancee sont bien entendu les applications web qui vont 
tirer parti de structures facilitant la memorisation de (relativement) grandes quantites 
de donnees sans devoir exploiter les cookies ou le dialogue constant avec une base de 
donnees distante, en Ajax par exemple. 

Or, les cookies ne sont que des miettes. lis sont familiers a tout un chacun, depuis les 
debuts du web a destination des particuliers. lis ont ete employes pour la gestion de 
paniers virtuels dans le cadre de l'e-commerce, pour la memorisation d'identifiants 
de sessions, et surtout pour pouvoir etablir des statistiques de visites en suivant 
l'internaute au fil de sa navigation. Leur inconvenient est de ne pas etre adaptes au 
stockage local de donnees plus complexes : 

• lis engendrent un trafic HTTP supplemental en ajoutant leur contenu a chaque 
requete (quel que soit l'objet demande, que les cookies lui soient utiles ou non), ce 
qui peut infiuencer les temps de reponse, notamment avec Ajax. 

• Leur taille est limitee, habituellement quelques kilo-octets. 

Le plug-in Flash est egalement equipe d'un equivalent nomme Flash Local Storage, 
qui necessite cependant le developpement dans ce langage, qui n'est pas aussi simple 
d'acces, et qui reste subordonne a la presence du plug-in. 

Faire appel a Ajax et a une base de donnees cote serveur est envisageable, mais 
engendre un trafic reseau plus important, une execution obligatoirement en mode 
connecte et une mise en place plus complexe. 



Figure 15-2 

Acces a deux espaces 
de stockage 



localStorage 





Document 
HTML 
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Web Storage quant a lui met en ceuvre deux objets nommes sessionStorage et 
local Storage pour faire persister les donnees de l'utilisateur respectivement durant la 
session ou sans limitation de duree particuliere. La capacite offerte est nettement supe- 
rieure, habituellement de 5 Mo a 10 Mo par defaut, bien que cette limite puisse etre 
modifiee au sein du navigateur. Les donnees ne sont alors plus vehiculees sur le reseau a 
chaque requete HTTP, et disposent d'une interface de programmation complete pour 
pouvoir y acceder en lecture, modification et suppression, de facon bien pratique. 

Deux espaces de stockage 

La manipulation des objets Web Storage s'effectue exclusivement par des scripts exe- 
cutes cote client par le navigateur. 

Ces donnees ne sont pas divulguees au travers des requetes HTTP, lors de l'envoi ou 
de la reception de documents HTML, elles ne sont done pas communiquees au ser- 
veur. Celui-ci ne peut pas non plus « directement » y ecrire des informations a l'aide 
des en-tetes HTTP ou du langage interprete (PHP, Java, .NET, etc.). 

Deux espaces de stockage existent, et different par leur portee et leur duree de vie. 

Stockage de session 

Le stockage de session (session storage) est destine a la memorisation de donnees ayant 
une courte duree de vie, dont la portee est limitee a la session active de la fenetre (ou de 
l'onglet) du navigateur ainsi qu'au domaine dont elles sont issues. II permet ainsi d'exe- 
cuter des applications web dans des fenetres (ou des onglets) distinct(e)s avec des 
ensembles de donnees differents sans risque d'interferences - ce qui n'est pas le cas des 
cookies. Les donnees sont effacees apres la fermeture de la fenetre (ou de l'onglet) et ne 
persistent pas. A l'ouverture d'une nouvelle session, dans une nouvelle fenetre ou un 
nouvel onglet, le navigateur initialise un nouvel objet de stockage. 

Lacces se fait via l'interface sessionStorage de type Storage, enfant direct de l'objet 
wi ndow, ce qui signifie qu'il s'agit d'un objet global au meme titre que la plupart des 
autres API et interfaces d'acces aux outils de navigation (historique, cookies, etc.), et 
qu'il est accessible depuis un eventuel element <i f rame> contenu dans le document. 

Local Storage 

A la difference du precedent, le stockage local beneficie d'une duree de vie plus 
longue puisqu'il n'est pas efface a la fermeture du navigateur. Sa portee est etendue a 
toutes les pages et tous les scripts provenant du meme domaine, dont il est issu ; done 
virtuellement, a toutes les fenetres et tous les onglets ouverts exploitant des pages 
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hebergees avec le meme nom de domaine. Hormis ces caracteristiques, il demeure 
fonctionnellement different du stockage de session. 

II est accessible via l'objet global 1 ocal Storage de type Storage, enfant de l'objet wi ndow. 

L interface Storage 

Pour acceder de maniere unifiee a sessionStorage et local Storage, l'interface 
Storage a ete definie. Le modele de donnees est un tableau associatif de paires cle/ 
valeur, accessible par trois fonctions nominees setltemO, getltemO , 
removeltemO : 

• setltem(c7e, valeur^) : stocke une paire cle/valeur ; 

• getltem(c7e) : retourne la valeur associee a une cle ; 

• removeItem(c7e) : supprime la paire cle/valeur en indiquant le nom de la cle. 

Toutes les valeurs sont de type chaine de texte (String). Bien qu'elles puissent etre 
lues directement via les proprietes de l'objet Storage, comme tout autre objet Java- 
Script, il est fortement recommande de s'en tenir aux methodes prevues a cet effet. 

L'interface Storage est aussi munie d'une propriete length et de deux methodes 
complementaires : 

• length : nombre total de paires cle/valeur stockees ; 

• keyO'nc/ex) : retourne la cle stockee a l'index specifie ; 

• clearO : efface toutes les paires. 

Stockage, lecture, suppression 

Loutil essentiel pour experimenter Web Storage reste la console JavaScript, fournie 
par tous les bons navigateurs avec leurs extensions de developpement, par exemple 
Firebug pour Firefox (onglet Console) ou les Outils de developpement sous Google 
Chrome. Elle permet de s'assurer du bon fonctionnement de l'interface, de consulter 
a un moment donne I'etat du stockage et de le modifier. 

Les exemples suivants exploitent a la fois stockage local et stockage de session, mais 
il est evidemment possible d'utiliser l'un sans faire appel a l'autre. 

Stockage avec setltemO 

// Memorisation d'une valeur dans la session courante 
sessionStorage. setltem("i denti fi ant" , "Si bel i us") ; 

// Memorisation d'une valeur dans le stockage local 
localStorage.setItem("derniere_visite" ,new DateQ) ; 
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Le premier argument de setltemO est la cle. Elle nomme l'emplacement oil Ton 
souhaite stocker les donnees pour pouvoir les y retrouver. Si une valeur numerique 
(par exemple 2) est utilisee comme cle, elle se voit obligatoirement convertie en 
chaine de texte (soit "2") avant d'etre utilisee. 

Le deuxieme argument est la chaine de caracteres a stocker. S'il ne s'agit pas d'une 
variable de type string alors le navigateur tente de convertir le tout au prealable, 
avec la methode toStringO. 

Lecture avec getltem() 

// Lecture d'une cle de la session courante 

var id_utilisateur = sessionStorage. getltem("identifiant") ; 

// Affichage 

al ert("Identi f i ant utilisateur : "+id_utilisateur) ; 
// Lecture d'une cle du stockage local 

var date_visite = localStorage.getItem("derniere visite") ; 

// Affichage 

i f (date_vi si te ! =undefi ned) { 

al ert("Derni ere visite : "+date_vi si te) ; 

} 

La recuperation du contenu est possible grace a la cle initiale, fournie en argument a 
la methode getltemO. Les donnees stockees sont renvoyees sous la forme d'une 
chaine de caracteres. 

Suppression avec removeltem() 

// Suppression de 1 'element de session "i denti f i ant" 
sessionStorage . removeItem("i denti f i ant") ; 

// Suppression de 1 'element de stockage local "derni ere_vi si te" 
local Storage. removeItem("derni ere visite") ; 

II ne faut pas hesiter a effacer les donnees devenues inutiles, l'espace total reserve 
etant de taille limitee. La methode removeltemO est prevue a cet effet pour sup- 
primer l'emplacement defini par la cle, ainsi que son stockage. 

Suppression totale avec clear() 

// Suppression complete de toutes les valeurs de session 
sessionStorage. clear() ; 

// Suppression complete de toutes les valeurs de stockage local 
1 ocal Storage . cl ear () ; 
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Cette methode n'affecte bien sur que le stockage effectue a l'origine du document. Toutes 
les donnees memorisees pour www.alsacreations.com, www. alsacreations.com: 80, 
et www. al sacreati ons . com/html 5/ sont concernees, mais pas celles des autres origines, 
par exemple un sous-domaine forum . al sacreati ons . com. 

En matiere de securite, il est recommande de faire tres attention a la portee de Faeces 
des donnees. Si celles-ci sont accessibles sur tout un domaine www.exemple.com, et 
que plusieurs developpeurs differents ont acces a des sous-repertoires de ce domaine, 
par exemple dans le cadre d'un hebergement mutualise sur www.exemple.com/ 
1 e_si te_de_roger/, etwww.exemple/le_site_de_pierre/, ils peuvent lire mutuelle- 
ment l'integralite de leurs stockages respectifs. C'est pourquoi il vaut mieux eviter 
Web Storage dans ce cas de figure specifique. 



Figure 15-3 

Deroule dans la console 
de Firebug 



»> aeaaionStorage 
item in Storage 

»> aeaaionStorage-aetltemCidentifiant", "Sibeliua") ; 



»> aeaaionStorage 

1 item in Storage identiflant="Sibelius n 

»> aeaaionStorage. getltemCidentifiant"} ; 



"Sibeliua" 

»> aeaaionStorage. remove I tera( "identifiant") ; 



>» aeaaionStorage 
item in Storage 



Un compteur de visites avec localStorage 

Etant etablie la persistance des donnees de localStorage au travers des visites suc- 
cessives, il serait tout a fait possible d'imaginer un compteur s'incrementant a chaque 
consultation d'un document HTML. 

Exemple complet 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Web-Storage</ti tl e> 

<meta charset="utf-8"> 

</head> 

<body> 



<P> 

Vous avez vu cette page 

<span i d="nb_vi si tes">un nombre indetermine de</span> 
fois. 
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</p> 

<scri pt> 

if (typeof (localStorage) == "undefined") { 

alert("Ce navigateur ne supporte pas Web Storage"); 

} else { 

// Valeur par defaut 

i f ( ! 1 ocal Storage . vi si tes) 

local Storage . setltem("vi sites" , "0") ; 

// Variable temporaire 
var nb = "" ; 

// Lecture 

// parselntO convertit le texte en nombre entier 
nb = parseInt(localStorage.getItem("vi sites")) ; 

// Incrementation du compteur 
nb++; 

// Memorisation 

local Storage. setltem("vi si tes" , nb) ; 
// Affichage 

document. getElementById("nb_visites") .innerHTML = nb; 

} 

</scri pt> 

</body> 
</html> 

Une precaution consiste a tester la presence de l'interface local Storage avec l'ins- 
truction typeof qui renvoie ' undef i ned ' si le navigateur ne la comprend pas. 

A l'aide de ces quelques fonctions de base, les possibilites sont infinies. Veillez 
cependant a en faire bon usage ; si les ordinateurs de bureau actuels disposent d'une 
marge de stockage confortable, ce n'est pas necessairement le cas de tous les periphe- 
riques mobiles. 

Surveiller le depassement de quota 

L'espace alloue n'est malheureusement pas infini. Au moment de la redaction de ce 
chapitre, deux pans de Web Storage demeurent flous et implementes de facons diffe- 
rentes dans les navigateurs : 
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• la gestion des exceptions, c'est-a-dire la connaissance des erreurs potentielles 
lorsqu'une operation n'a pu etre menee a bien 

• et la connaissance de l'espace restant. 

Pour les implementations completes, une exception de type QUOTA_EXCEEDED_ERR est 
declenchee si une tentative (infructueuse) d'ecriture depasse la limite. Placer les ins- 
tructions dans un bloc try/catch JavaScript permet d'effectuer un essai de stockage, 
et d'attraper l'exception le cas echeant. 

Detection du depassement de quota 

try { 

"localStorage.setltemC'data" , 
"0100000101101100011011000010000001111001011011110111010101110010001000 
00011000100110000101110011011001010010000001100001011100100110010100100 
00001100010011001010110110001101111011011100110011100100000011101000110 
1111001000000111010101110011") ; 
} catch (excepti on) { 

if (excepti on == QUOTA EXCEEDED ERR) { 
al ert( ' Limite de stockage atteinte'); 

} 

} 

Dans ce cas, la donnee n'est pas sauvegardee et il faut faire de la place avant d'effec- 
tuer une nouvelle tentative. 



Un soupcon de JSON 

II faut bien garder a l'esprit que tous les echanges concernent des chaines de texte. C'est 
pourquoi I'exemple precedent doit faire appel a la fonction JavaScript parselntO pour 
convertir les donnees stockees sous forme de caracteres en nombre entier. 

Toute variable etant au prealable convertie en texte grace a sa methode toString, la 
tentative de stockage et de lecture d'un objet JavaScript « commun » produira le 
resultat d'une simple conversion de cet objet en texte : "[object Object]". Pour 
passer outre, il faut employer le format JSON (JavaScript Object Notation), dont tous 
les navigateurs a la page sont equipes nativement. Ce dernier linearise en une seule 
chaine toutes les proprietes de l'objet. 

Ce format est tres courant dans la conception d'appels Ajax, notamment a l'aide de 
j Query. 
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Creation d'un objet 

// Construction d'un objet (vide) 
var album = {}; 

// Ajout de membres numeriques 
album. duree = 208; 
album. pistes = 1; 

// Ajout de membres chaines de texte 

album. titre = "De me prends pour Al Pacino"; 

album. artiste = "Bernard Menez"; 

La visualisation de l'objet est aisee dans les consoles JavaScript qui affichent une vue 
lisible resumant toutes les proprietes. 



Figure 15-4 

Apercu de l'objet dans la 
console Chrome 



> album; 
T Object 

artiste: ''Bernard Menez" 
duree: 208 
pistes: 1 

titre: "Je me prends pour Al Pacino" 
► proto : Object 



La methode JSON.stringifyO produit une chaine de texte pour tout objet qui lui 
est passe en argument. A l'inverse, la methode JSON.parseO permet de recuperer 
l'objet initial a partir du format JSON. 

Conversion avec JSON et stockage 



// Stockage 

1 ocal Storage . setltem("al bum" , JSON. stringify(al bum)) ; 

Prealablement a l'appel a setltemO, les donnees sont linearisees. 
Lecture du format JSON et parsing 

// Destockage 

console. log( 3S0N.parse(localStorage.getItem("album")) ); 

Afin de retrouver l'objet initial, il suffit de « decoder » dans le sens inverse la chaine 
recue par la methode getltem(). 

Lexamen de l'espace de stockage alloue devient convivial dans les Outils de develop- 
pement de Google Chrome. Longlet Ressources comprend deux vues qui disposent 
chacune d'un tableau de correspondance entre cles et valeurs. 

II en va de meme pour Dragonfly qui est l'outil de predilection avec le navigateur Opera. 
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Figure 15-5 

Deroule des instructions 
dans la console Chrome 



j :soh 

* 3 SON 

parse : function parsef,) -[ [native code] } 
► stringify: function stringify() -[ [native code] J 
K pro-to : Object 

> !JSON.stringifytalburn) 

"{"duree" : 29Bj "pistes ": lj "titre" : "Je me p rends pour Al Pacino"., "artiste" : "Bernard Menez"}" 

> local Storage .set Item ( " album" jJSON. stringify (album) ) ; 
undefined 

> localStorage 
T Storage 

album "{"duree" ; 2€Sj "pistes" : l 3 "titre" : "Js me pren-ds pour Al Pacino"j "artiste" : "Bernard Kenez"}" 
length: 1 
► pro to : Storage 

> J5GN.parse(local5torage .getltem( "album") ) 

* Object 

artiste: "Bernard Menez" 
duree: 20B 
pistes: 1 

titre: "3e ne prends pour Al Pacino" 
► proto : Object 



Figure 15-6 

Ressources localStorage et 
sessionStorage sous Chrome 



Elements I m \ Resource 


s I ^< Network: 


Scripts Timeline j^' - Profiles Audits Console 


► Q Frames 
^ [ \ Databases 


Key- 
album 


Value 

[■'duiee'iaja. "pistes": 1 ."tilre'VMe me prends pom Al Pa ana", "artiste" ^'Bernard Menez"} 


* |^| Local Storage 










T Session Storage 






g 127.0.0.1 






► Cookies 






* [^Application Cache 







Figure 15-7 

Ressources de stockage 
sous Opera 







Scripts jj J ), Reseau ^> Ressources ^ 


j Stockage , £j% Erreurs 


Utilrtaires 


Cookies 


5tockage loca 


| Stockage de session Preferences du widget 






HTMLB : 


Web -Storage 








album 




i "duree" : 293 . "pistes " : 1 . "Ti-re" : " Je me 


prends pour Al Pacino" 


"artiste" : "Bernard Menez"} 



L'acces a ope ra:websto rage sous Opera affiche des informations et un controle plus 
fin des options. 



Figure 15-8 

Synthese des ressources de 
stockage sous Opera 



Stockage local 


mm 27.0.0.1:8888 


Taille 


273 octets 




Chemin du fichier dedonnees 


pstarage\00\09\000000rj0 




Taille maximum permise sur le disque (Krj} 


5120 |g 




Lorsque la taille maximum est depassee 


□emander une majoration 




| En registrar | 


| Effacer | 










htos^ctciaonflv.orjeracom 



II est aussi envisageable de stocker des donnees binaires, par exemple des images, en 
les « encodant » en chaine texte avec le format Base64. 
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Stocker sur un evenement 

II est parfois utile de pouvoir declencher le stockage d'une variable sur un quelconque 
evenement survenant dans la page, autre que l'execution au chargement. Toute 
declaration est possible avec les methodes DOM telles qu'addEvent, ou plus simple- 
ment avec les attributs d'evenements, notamment onchange. 

<P> 

<label for="prenom">Prenom</l abel> 
<input type="text" id="prenom" name="prenom" 
onchange="l ocal Storage . setltem(thi s . name , thi s . val ue) ; "> 

</p> 

<P> 

<input type="checkbox" id="conditions" 
onchange="sessionStorage. setltem (this. id, this. checked) ; "> 

<label for="conditions">J 'accepte les conditions</label> 

</p> 

<script> 

// Valeurs par defaut au chargement 
if(typeof localStorage!=' undefined') { 

var prenom = local Storage. getltem('prenom') ; 

if(prenom) document. getElementByld('prenom') .value = prenom; 

} 

if(typeof sessionStorage!='undefined') { 

var etat = sessionStorage.getltemC conditions') ; 

if (etat=='true') document. getElementByld('conditions') .checked = true; 

} 

</scri pt> 

Ces deux cas d'utilisation sont relativement classiques. Dans le premier, il s'agit de 
memoriser une valeur texte des qu'un champ <input> est modifie par l'utilisateur ; 
dans le deuxieme, de memoriser l'etat d'une case a cocher. Pour les deux situations, 
des le chargement, le stockage de session et le stockage local sont interroges pour 
definir l'etat par defaut de ces champs d'entree. 

Stockage a intervalles reguliers 

Une des applications possibles de Web Storage est la memorisation reguliere d'infor- 
mations entrees par l'utilisateur, a des fins de sauvegarde et de restauration. Cette 
fois, il ne s'agit plus de se baser sur un evenement suscite par l'utilisateur, mais sur des 
declenchements a intervalles reguliers. 
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<P> 

<textarea name="texte" i d="texte"x/textarea> 
</p> 

<scri pt> 

// Champ qui va etre concerne 

var champ = document. getElementById("texte") ; 

//Si la valeur de la sauvegarde est presente au chargement 
i f (sessionStorage. getltem(" sauvegarde") . 1 ength ! =nul 1 ) { 
// Alors il suffit de la restaurer © 
champ. value = sessionStorage. getltem("sauvegarde") ; 

} 

// Toutes les deux secondes (2000 ms) Q 

setlnterval (function(){ 

// Le champ texte est memorise dans le stockage de session Q 
sessionStorage. setltem(" sauvegarde" , champ . val ue) ; 

}, 2000); 

</script> 

La fonction JavaScript setlnterval () est en charge de declencher l'appel a une 
fonction, a des intervalles reguliers O Cette fonction anonyme exploite 
sessionStorage pour memoriser a la cle « sauvegarde » la totalite de la zone de texte 
<textarea> Q. Si l'utilisateur rafraichit la page par inadvertance ou circule vers une 
autre adresse entre-temps, il est possible de restaurer la valeur du champ <textarea> 
qui a ete memorisee ©. 

Evenements 

L'API comprend l'evenement storage qui doit etre declenche lorsqu'une cle est 
modifiee. Cela permet d'envoyer une notification a d'autres onglets du navigateur, 
s'ils sont ouverts a la meme adresse. 

window. addEventLi stener( ' storage ' , function(event) { 

alert('La cle '+event . key+ ' a ete modifiee de '+event.oldValue+' a 
' +event . newVal ue) ; 
}, false); 

Dans la pratique, peu de navigateurs generent cet evenement, promis cependant a un 
bel avenir. 
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Prise en charge 

Tableau 15-1 Tableau de support de I'API Web Storage 



Navigateur 


Version 


Mozilla Firefox 


2+ (partiel) 




3.5+ (complet) 


Apple Safari 


4+ 


Google Chrome 


4+ (sessionStorage depuis la version 5) 


Opera 


10.5+ 


iOS 


3.2+ 


Opera Mini, 




Opera Mobile 


11 + 


Android 


2.1 + 


Internet Explorer 


8+ 



Desactiver Web Storage dans Mozilla Firefox 

Dans Mozilla Firefox, il est possible de desactiver Web Storage en explorant about :config (URL a 
taper dans la barre d'adresses) et en modifiant le parametre dom . storage . enabl ed a fal se. 



Alternatives a Web Storage 

Les librairies JavaScript proposant une alternative concrete pour les anciens naviga- 
teurs (avec des appels de fonction unifies) sont nombreuses. Elles se servent genera- 
lement d'astuces pour stocker les donnees par d'autres moyens (cookies, Flash, user- 
Data) lorsqu' elles detectent que le navigateur a ete sorti de la naphtaline. Toutes ont 
leurs avantages et leurs inconvenients. Facilite d'utilisation, respect de la syntaxe ori- 
ginate, limitation de l'espace alloue, implementation de JSON ou utilisation de fra- 
meworks existants, il convient de peser le pour et le contre selon le resultat attendu. 
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RESSOURCE Alternatives a Web Storage 

sessionstorage 

► http://code.google.eom/p/sessionstorage/ 

Store.js (IE 6+, Safari 4+, Firefox 2+, Chrome 5+, Opera 10.5+) 

► https://github.com/marcuswestin/store.js 
Store.js pour jQuery 

► https://github.com/whitmer/store.js 

realStorage (Chrome 4-6, Firefox 3.5-3.6, IE 8, Safari 4-5) 

► http://code.google.eom/p/realstorage/ 
webStorage, plug-in jQuery (IE 6+, Firefox 2+, Chrome 2+) 

► http://github.com/TrippingTheBits/webStorage 

jStorage (IE6 +, Firefox 2+, Safari 4+, Chrome 4+, Opera 10.50+) sur base de librairies (jQuery, Proto- 
type, MooTools) 

► http://www.jstorage.info/ 
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(Indexed Database 
& Web SQL Database) 

II n'y a jamais assez de place pour tout ce que le Web peut offrir, d'ou 
l'interet d'un stockage evolue et structure, que ce soit par une approche 
SQL ou JavaScript avec des catalogues d'objets. 




Figure 16-1 Stockage simple, mais ecologique 
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Au-dela de Web Storage, le besoin de stockage de bases de donnees structurees dans 
la session du navigateur se fait de plus en plus pressant. L'objectif est d'avoir un con- 
trole plus fin pour effectuer des recherches, des tris, des mises a jour groupees, des 
selections avec des mises en relation entre l'une ou l'autre collection de donnees. Les 
bases de donnees existent depuis la nuit des temps sur les serveurs web, et sont mises 
a contribution par la majorite des applications web ou des systemes de gestion de 
contenu (CMS). 

Que ce soit a l'aide des formats SQL, XML ou d'autres plus exotiques (mais non 
moins performants), l'interet d'une base est de pouvoir canaliser l'information dans 
des structures adaptees pour la retrouver plus vite parmi de grandes quantites de don- 
nees et de proceder a des operations logiques avant traitement et affichage. 

Pour repondre a ces besoins, la technologie Web SQL Database a inaugure I'exploi- 
tation de bases de donnees cote client (c'est-a-dire cote navigateur, et non plus ser- 
veur). Linconvenient est quelle n'est plus maintenue, car le W3C a decide qu'il 
n'etait pas de son ressort de specifier le langage SQL sous-jacent. Puis IndexedDB a 
pris le relais, par une autre approche sans aucune allusion a SQL. 

Ces espaces de stockage permettent desormais de conserver des donnees en quantite 
appreciable afin d'eviter de les faire circuler sur le reseau. Cela est une reponse directe 
aux preoccupations de performance et de diminution des requetes HTTP soulevees 
par les developpeurs. Selon l'usage, elles remplacent avantageusement des echanges 
frequents entre le serveur et le client, bases sur les cookies, les formulaires ou XML- 
HttpRequest (Ajax). 

De par leur structure, elles autorisent egalement le tri, le filtre et la recherche. Dans 
le cadre d'une application web et avec de grandes quantites de donnees, cela peut 
s'averer crucial pour l'utilisateur en termes de reactivite au lieu de faire intervenir le 
serveur distant pour chacun de ces traitements. 



Figure 16-2 

Bases de donnees 
accessibles en HTML 



Requetes 



► 




Donnees 



Document 
HTML 



Base de donnees 
dans le navigateur 



Les deux protagonistes suivent une philosophic differente, sur le fond et la forme. 
WebSQL est un systeme de bases de donnees relationnelles, tandis qu'IndexedDB 
est un systeme de tables indexees. 
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L'aube d'lndexedDB 

Indexed Database est un standard en matiere de stockage de donnees structurees et 
indexees, qui est pense pour JavaScript. L'API est declinee en deux versions : syn- 
chro ne a destination des Web Workers, et asynchrone pour un usage plus courant. 



Ressource Specification Indexed Database 

Du cote du W3C 

► http://www.w3.org/TR/lndexedDB/ 



Philosophie 

IndexedDB est prevu pour stacker des objets, c'est-a-dire des paires de cle/valeur. 
Chaque type d'objet peut etre recueilli dans un catalogue (Object Store). II n'y a pas de 
notion de tables structurees en lignes et en colonnes : une base contient un ou plu- 
sieurs catalogues qui eux-memes contiennent des objets. Chaque catalogue peut pos- 
seder des index dans le but d'effectuer des requetes et d'iterer sur les jeux de resultats. 

Le tout se deroule dans des transactions, par 1'utilisation d'evenements DOM pour 
savoir lorsque les resultats d'une requete sont disponibles en mode asynchrone. 

Le modele d'execution comprend plusieurs etapes : 

1 Ouvrir une base. 

2 Debuter une transaction. 

3 Creer un catalogue d'objets. 

4 Effectuer une ou plusieurs requetes (insertion, selection, etc.). 

5 Attendre la fin de l'operation avec l'ecoute d'un evenement DOM. 

6 Traiter les resultats recus. 

Mozilla milite en faveur d'lndexedDB qui a le merite d'etre une solution plus ele- 
gante qu'un usage du langage SQL cote client. Cette vision est aussi partagee par 
Microsoft. 

Lapplication developpee dans ce chapitre va stacker les coordonnees spatiales de 
villes (latitude, longitude, altitude) et effectuer quelques operations de base, associees 
a quelques boutons de formulaire. Le resultat sera affiche de facon brute dans un ele- 
ment <di v>. 
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Figure 16-3 

Apercu de I'interface 



MfflHfi^M^ □ HTML5 : IndewdDG 

t>J*|| C|l*|l 



:Ehost.''db/indeKeddb.html 



Journal IndexedDB 



Inserer les donnees 



Selectionner tout le contenu 



Selectionner par cle id = 



Selectionner avec condition alt = 



Selectionner avec condition alt > 



Supprimer les donnees 



Application HTML 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : IndexedDB</ti tl e> 
<meta charset="utf-8"> 

<link rel="stylesheet" href="styl es . ess" type="text/css"> 

</head> 
<body> 

<div cl ass="wrap"> 
<form> 

<pxstrong>lournal IndexedDB</strongx/p> 
<div name="log" id="log"x/div> 

<p><input type="button" val ue="Inserer les donnees" i d="i nsere"x/p> 
<pxinput type="button" val ue="Sel ecti onner tout le contenu" 
"id="tout"x/p> 

<pxinput type="button" val ue="Sel ecti onner par cle" id="get"> 
<label for="dbid">id = </labelxinput type="text" "id="dbid" 
styl e="wi dth : 3em" val ue="2"x/p> 

<pxinput type="button" val ue="Sel ecti onner avec condition" 
i d="f i 1 trel"> <label for="alt">alt = </l abel xi nput type="text" id="alt" 
styl e="wi dth : 3em" val ue="19"x/p> 

<pxinput type="button" val ue="Sel ecti onner avec condition" 
i d="f i 1 tre2"> <label for="mi nal t">al t > </labelxinput type="text" 
id="minalt" style="width:3em" val ue="100"x/p> 
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<pxinput type="button" value="Supprimer les donnees" i d="vi de"x/p> 
</form> 
</di v> 

<script src="indexeddb. js"x/script> 

</body> 
</html> 

Le defi est de completer le fichier de <scri pt> pour rendre tout cela operationnel. 

La premiere etape, hors prise en compte de l'API, est la definition des actions (une 
fonction par bouton) et de deux fonctions JavaScript prevues pour l'affichage des 
resultats (texte simple, et version objet). 

Source JavaScript indexeddb.js 

// Gestion des evenements au die 
document. getElementByld('tout') .onclick = tout_db; 
document. getElementByld('insere') .onclick = i nserti on_db ; 
document. getElementByldC vide') .onclick = vide_db; 
document. getElementByld('get') .onclick = get_db; 
document. getElementByld('filtrel') .onclick = filtrel_db; 
document . getEl ementById( ' fi 1 tre2 '). one! i ck = filtre2_db; 

// Fonction d'ajout au journal 
function log(txt) { 

document. getElementByld('log') .innerHTML += txt+"<br>"; 

} 

// Fonction d'affichage resultat 
function affiche(ville) { 

document. getElementByld('log') .innerHTML += 

' <tabl exth> ' +vi lie . desc+ ' </th> 1 

+ ' <td> ' +vi 11 e .1 at+ ' </td> ' 

+'<td>'+ville .lng+'</td>' 

+ ' <td> ' +vi 11 e . al t+ ' m</tdx/tabl e> ' ; 

} 



Ouvrir une base et creer un catalogue 

Tout d'abord, la detection de la presence du membre i ndexedDB dans wi ndow indique la 
disponibilite de l'API. Les premieres implementations de Gecko et WebKit faisant 
appel a des versions non finalisees, elles sont prefixees respectivement par moz et webki t. 
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Initialisation de I'interface 

if (! window. indexedDB && wi ndow. mozIndexedDB) { 

// Gecko 

wi ndow. i ndexedDB = mozIndexedDB; 
} else i f( !wi ndow. i ndexedDB && wi ndow.webkitlndexedDB) { 

// WebKit 

wi ndow. i ndexedDB = webki tlndexedDB ; 
wi ndow. IDBKeyRange = webki tIDBKeyRange ; 
wi ndow. IDBTransaction = window. webki tIDBTransacti on ; 
} else if ( !wi ndow. i ndexedDB) { 

alert("Votre navigateur ne supporte pas IndexedDB") ; 

} 

La reassignation de ces objets prefixes a wi ndow. i ndexedDB est une astuce autorisant 
une utilisation directe, neanmoins a vos risques et perils pour ces versions en perspec- 
tive d'evolutions. 

Ouverture de la base 

// Variables general es 
var db; 

var version = 1; 

if (window. indexedDB) { 

// Ouverture de la base Q 

var requeteOpen = window. indexedDB. open("BaseGeo") ; 

// Succes de 1 'ouverture Q 

requeteOpen . onsuccess = function(event) { 

// Reference a la base Q 
db = event . target . resul t ; 

log("Base ' "+db. name+" ' ouverte"); 
log("Version : "+db. version) ; 

log("Catalogues : "+db . objectStoreNames . 1 ength) ; 

db.onerror = function(event){ 
logC'Erreur DB") ; 
// Affichage dans la console 

if(typeof consol e ! = ' undef i ned ' ) console. log(event) ; 

}; 

// Si la version a change Q 
if(version!= db. version) { 
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// Phase de changement de version 

var requeteSetVersi on = db.setVersion(version) ; 

requeteSetVersion.onfailure = db.onerror; 

requeteSetVersion.onsuccess = functionO { 

// Effacement du catalogue s'il existe Q 
i f (db . objectStoreNames . contai ns( ' geo 1 )) 
try { 

db.deleteObjectStore("geo") ; 

} catch (excepti on) { 

"logC'Erreur lors de la reinitialisation"); 

} 

// Creation du catalogue Q 

1 og("Creati on nouveau catalogue..."); 

var objStore = db.createObjectStore("geo" , {keyPath : "id"} , true) ; 

// Creation d'un index Q 
1 og("Creati on index..."); 

objStore. createlndex("alt" , "alt", { unique: false }) ; 
1 ogC'Changement de version OK"); 



Attention : l'utilisation de l'API est susceptible d'etre desactivee pour les pages exe- 
cutees localement (file://). Pour des tests optimaux, il faut heberger le document 
HTML sur un serveur HTTP local ou distant (http://). 

Un avertissement est affiche au prealable a l'utilisateur lors de la creation d'une base. 



}; 



} 



} 



} 



Figure 16-4 

Avertissement a la creation 




X 




Ce site Web demande de stacker 

des donnees sur votre ordinateur pour une 

utilisation hors connexion. 



Autoriser 



Jamais pour ce site 



x 
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La phase d'initialisation comprend plusieurs etapes : 

• Une requete d'ouverture est formulee avec la methode open(), qui prend en argu- 
ment le nom de la base souhaitee 0. 

• En cas de succes, un evenement DOM success est declenche, pour lequel une 
fonction recevant 1' evenement lui-meme permet d'enchainer la suite des actions 0. 

• On retrouve dans la propriete target, result de l'evenement une reference a la 
base ouverte 0. C'est l'occasion de I'equiper d'un gestionnaire pour les evene- 
ments de type error. 

• La version de la base est memorisee dans la propriete version. Elle permet de 
provoquer un changement de structure, c'est-a-dire de savoir s'il est necessaire 
d'adapter sa conception a une nouvelle morphologie pour les objets ©• Une tran- 
saction de changement de version avec setVersionO est obligatoire pour creer un 
catalogue d'objets 0. Le numero de version est arbitraire. Le seul critere qui 
compte est la difference, il est tout a fait possible de passer a la version 2 apres la 
version 1, a la version 15 apres la version 3, ou l'inverse. 

• Par mesure de precaution, ce script efface le catalogue s'il est deja present avec 
deleteObjectStore(). Un script plus evolue pourrait chercher a en conserver les 
donnees. 

• La creation d'un ObjectStore est declenchee par createObjectStoreO. 
Celui-ci porte le nom geo, et une cle nommee id. 

• Le tout est assorti d'un index avec createlndexO sur la propriete alt en pre- 
vision d'une procedure de recherche. 



Figure 16-5 

Apercu du resultat Journal IndexedDB 

apres OUVerture Base ■BaseGeo' ouverte 

Version : 
Catalogues : 

Creation nouveau catalogue... 
Creation index... 
Changement de version OK 



Inserer des donnees dans une transaction 

La base etant prete a recevoir des donnees, il ne reste plus qua initier une transaction 
grace a la methode transactionO, et au sein de celle-ci proceder a l'ajout des objets 
au catalogue. 

Insertion d'objets 

function i nserti on_db() { 
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log("Insertion de 3 objets..."); 
// Nouvelle transaction Q 

var transaction = db . transaction( ["geo"] , IDBTransacti on . READ_WRITE) ; 

transacti on. oncomplete = function() { 
log("Insertion complete"); 

}; 

transaction. onerror = functionO { 
"logC'Erreur Tors de 1 ' i nsertion") ; 

}; 

// Recuperation du catalogue d'objets Q 

var objStore = transaction. objectStore("geo") ; 

// Objets a inserer ® 
var villel = { 
id:l, 

lat:48. 58177, 
lng:7. 750555, 
alt: 142, 

desc: "Strasbourg" 

}; 

var ville2 = { 
id:2, 

lat:48. 458807, 
lng:-5. 088043, 
alt: 19, 

desc : "Ouessant" 

}; 

var ville3 = { 
id: 3, 

lat:49.0525, 
lng:7. 425833, 
alt: 249, 
desc : "Bi tche" 

}; 

// Affichage pour information 
affiche(villel) ; 
affiche(ville2) ; 
affiche(ville3); 

// Ajout au catalogue Q 
objStore. put(villel) ; 
objStore. put(ville2) ; 
objStore. put(ville3) ; 
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La transaction Q porte sur le catalogue geo, dont le nom est indique en premier 
parametre dans un tableau de donnees. Si d'autres catalogues etaient concernes 
simultanement, il suffirait de les y indiquer. La transaction doit etre ouverte en mode 
lecture/ecriture avec la constante READ_WRITE. 

Deux evenements sont prevus, complete et error qui sont attrapes respectivement 
par deux fonctions associees aux membres oncomplete et onerror de la transaction. 

Le catalogue d'objets concerne est recupere grace a la methode objectStore() 0. 
Les objets sont prepares (ici « en dur » dans le code source JavaScript) et ajoutes 
avec la methode put() 0. Celle-ci les remplace en se basant sur la cle correspondant 
a un objet deja present dans le catalogue. 

II existe egalement une methode add() qui ne se soucie pas du remplacement, mais qui 
provoquerait une erreur en cas de doublon, car les cles sont ici specifiquement indiquees. 

Afficher le contenu 

Literation sur l'ensemble du contenu est la plus aisee a mettre en place. 

Recuperation des objets stockes 

function tout_db() { 

"logC'Affi chage du contenu du catalogue"); 

// Nouvelle transaction 

var transaction = db.transaction(["geo"]) ; 

// Catalogue d'objets Q 

var objStore = transaction. objectStore("geo") ; 

// Ouverture d'un curseur Q 

var requeteCur = objStore. openCursorO ; 

requeteCur . onsuccess = function(event) { 

// Curseur 

var cursor = event . target . resul t ; 

// Si le curseur n'est pas nul Q 
if(cursor) { 

// Affi chage du contenu 
affiche(cursor. value) ; 

// Continue jusqu'a 1 ' enregi strement suivant 
cursor. continueC) ; 

} 
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}; 

requeteCur.onfailure = db.onerror; 

} 

II s'agit egalement de debuter une transaction avec la methode transact! on () sur 
l'objet de la base de donnees Q puis de chercher le catalogue avec objectStoreO sur 
cette transaction Q. La derniere etape est l'ouverture d'un curseur sur le catalogue 
d'objets avec openCursor(). 

En cas de succes, le curseur correspond a la propriete target, result de l'objet eve- 
nement event attrape ©. Si un resultat est present ©, la fonction d'affichage prend 
le relais, avec l'objet 0, reference dans la propriete value. La methode continueO 
place le curseur sur l'enregistrement suivant Q, et declenche un nouvel evenement 
success, pour faire persister la boucle jusqu'a ce qu'il n'y ait plus de resultat valide. 

Figure 16-6 

Apergu du resultat Journal IndexedDB 



Base "BaseGeo" ouverte 
Version : 1 
Catalogues : 1 
Insertion de 3 objets... 


Strasbourg 48.58177 


7.750555 


142m 


Ouessant 48.458807 


-5.088043 


19m 


Bitche 49.0525 7.425833 


249m 


Insertion complete 

Affichage dj contenj du catalogue 


Strasbourg 48.58177 


775D555 


142m 


Ouessant 48.458807 


-5.088043 


19m 


Bitche 49.0525 7.425833 


249m 





Inserer les donnees 



| Selectionner tout le contenu^ 



Recuperation par de 

function get_db() { 

// Valeur d'apres 1 'element input 

var dbid = document . getEl ementById("dbi d") . val ue ; 

if(dbid=='undefined' || dbid==") { 

logC'Veuillez indiquer un id"); 
} else { 

dbid = parselnt(dbid) ; // Conversion en entier 
log('id='+dbid) ; 
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// Nouvelle transaction O 

var transaction = db.transaction(["geo"]) ; 

// Utilisation de get() sur le catalogue Q 

var requete = transaction. objectStore("geo") .get(dbid) ; 

// En cas de succes Q 

requete . onsuccess = functionO { 

if (requete. result) affiche(requete. result) ; 

}; 

requete . onerror = db.onerror; 



} 

} 

Une autre methode d'acces direct consiste a utiliser la methode get() sur le catalogue 
pour sortir un objet d'apres sa cle ©. Cette fa9on de faire ne deroge pas a la regie des 
transactions Q et des evenements success pour traiter le resultat s'il y a lieu Q. 



Utiliser un index 

L'interet majeur d'une base est de pouvoir effectuer une selection d'objets sur des cri- 
teres. Dans ce but, l'index prevu initialement sur la propriete al t de chaque objet est 
mis a contribution. Un index a pour vocation d'indexer le contenu afin d'effectuer 
des operations de recherche plus rapidement et plus facilement. 

Selectionner par index et valeur 

function filtrel_db() { 

// Valeur d'altitude d'apres le formulaire 

var altitude = parselntCdocument.getElementByld('alt') .value) ; 
log('alt='+altitude) ; 

var transaction = db.transaction(["geo"]) ; 
var objStore = transacti on . objectStore("geo") ; 

// Index "alt" du catalogue d'objets 
var indexAlt = objStore. index("alt") ; 

// Application a l'index Q 

i ndexAl t . get(al ti tude) . onsuccess = function(event) { 
i f (event . target . result) affi che (event . target. result) ; 

}; 



} 
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Transaction et catalogue d'objets etant prets, la methode index () appliquee au cata- 
logue renvoie une interface exploitable avec le critere selectionne Q- En l'occurrence, 
l'application de la methode get() a l'index 0, avec pour parametre la valeur recher- 
chee, genere en cas de succes un jeu de resultats restreint. 

Plutot que de rechercher par valeur exacte de l'altitude parmi les villes stockees, on 
peut definir un intervalle avec une limite. 

Selectionner par limite 

function filtre2_db() { 

// Valeur d'apres le formulaire 

var altitude = parseInt(document.getElementById('minalt') .value) ; 

// Utilisation de l'index 
var indexAlt = 
db.transaction(["geo"]) .objectStore("geo") . i ndex("al t") ; 

// Creation d'un objet IDBKeyRange avec limite basse 
var limite = IDBKeyRange. lowerBound(altitude) ; 

// Application au curseur 

indexAlt. openCursor(limite) .onsuccess = function(event) { 
var cursor = event . target . resul t ; 
if(cursor) { 

1 og ( ' al t> ' +al ti tude) ; 
affiche(cursor. value) ; 
cursor . conti nue() ; 

} 

}; 

} 

Au prealable, la valeur de la limite est obtenue d'apres le formulaire HTML, puis 
l'index retrouve comme precedemment, mais cette fois avec une ecriture raccourcie 0. 
En effet, rien n'interdit de chainer les methodes ainsi, en supposant que les gestion- 
naires d'evenements pour les erreurs ont ete definis au prealable. 

Un objet IDBKeyRange doit etre elabore 0, pour lequel est definie une limite basse 
avec lowerBound(). C'est ce « filtre » applique a l'ouverture d'un curseur sur 
l'index qui extrait les resultats correspondants, avec une iteration semblable aux 
exemples precedents. 
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Journal IndexedDB 

Base "BaseGeo" ouverte 
Version : 1 
Catalogues : 1 
id=2 



Ouessant 


46 458807 


-5.088043 


19m 


alt=19 


Ouessant 


48.458807 


-5 088043 


19m 


alt>100 


Strasbourg 


48 58177 


7.75D555 


142m 


alt>100 


Bitche 49.0525 7.425B33 


249m 





Inserer les donnees 



| Selectionner tout le contenu | 

| Selectionner par cie^ id = 2 

| Selectionner avec conditiorT] alt = 19 

| Selectionner avec condition j alt > 1 00 

| Supprimer les donnees | 

Effacer un catalogue 

Le contenu d'un catalogue est efface de maniere simple et efficace avec la methode 
clear(). Le tout se deroule toujours dans une transaction, en mode lecture/ecriture. 

Effacer le contenu de I'Object Store 

function vide_db() { 

transaction = db.transaction(["geo"] , IDBTransacti on . READ_WRITE) ; 
transaction . objectStore("geo") .clearO ; 

} 

Perspectives 

IndexedDB evolue dans une dimension parallele qui peut sembler deroutante, car sa 
syntaxe ne ressemble pas a SQL, meme pour des developpeurs aguerris. Son appro- 
priation necessite une bonne dose de concentration. Ce chapitre ne peut en couvrir 
toutes les fonctionnalites, a moins de courber l'espace et le temps, a la maniere des 
livres de la Bibliotheque de l'Universite de l'lnvisible. 

Neanmoins, il s'agit d'une API complete promise a un tres bel avenir. Les quelques 
exemples precedents ne sont pas figes, et sont appeles a etre completes : 
• Les instructions peuvent etre condensees et regroupees, au detriment cependant 
de la lisibilite. 



Figure 16-7 

Apercu du resultat final 
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• Les donnees inserees sont presentes « en dur » dans le code source, tandis qu'elles 
pourraient provenir d'un formulaire, un appel Ajax, un evenement envoye par le 
serveur, etc. 

• La gestion des erreurs est prevue pour intervenir a tous les niveaux, on ne lui con- 
sacre jamais assez de temps ni de precautions. Un evenement par methode, par 
etape ou par transaction est tout a fait possible. 

• Un algorithme pour effectuer des tris ou utiliser des tableaux d'objets est applica- 
ble aux resultats retournes. 

• D'autres methodes sont prevues par I'API pour effectuer des remplacements de 
donnees, effacer un enregistrement d'apres un index ou une valeur, etc. 

• Le stockage utilise une cle primaire definie arbitrairement a l'insertion, ce qui peut 
provoquer une exception si un element possede deja la meme cle. L'API prevoit des 
generateurs de cles pour mimer le comportement de l'auto-incrementation SQL. 

• Par simplicite, les objets mentionnes restent relativement simples, mais la puis- 
sance d'IndexedDB est au service des bases plus complexes, pour inventorier des 
collections ne se limitant pas au texte. Des applications web peuvent y faire appel 
pour generer des listes, des tableaux, des galeries d'images ou de videos, etc. 

Pour la petite histoire, sachez que rien n'empeche un navigateur d'implementer 
IndexedDB avec SQL ; c'est entre autres le cas de Firefox qui utilise SQLite pour 
stocker les donnees sans que 1'utilisateur n'ait a s'en soucier. 



Prise en charge 



A des fins de tests, I'API peut etre desactivee dans Firefox, avec about : conf i g (URL 
a taper dans la barre d'adresses) et l'option dom. i ndexedDB . enabled. Les premieres 
implementations faisant appel a des prefixes « moz » et « webkit », il faut en tenir 
compte dans l'ouverture de la base. 

Tableau 16-1 Tableau de support IndexedDB 



Navigateur Version 


Mozilla Firefox 


4+ avec prefixe 


Google Chrome 


1 1 + avec prefixe 


Internet Explorer 


10+ 


Opera 





Navigateur Version 


Apple Safari 




Android, iOS, Opera Mini, 
Opera Mobile 





Rappel 

Consultez le site d'accompagnement de I'ouvrage pour des informations de compatibilite mises a jour. 
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Le crepuscule de Web SQL Database ? 

L'API Indexed Database est « preferee » a Web SQL Database, dont la specification a 
ete declaree obsolete en 2010, mais peut encore etre consultee en ligne. Elle met en 
oeuvre les principes du langage SQL tels que Ton peut deja les rencontrer cote serveur. 

Ressource Specification Web SQL Database 

Web SQL Database en tant que Working Group Note W3C 
► http://dev.w3.org/html5/webdatabase/ 

Cette specification a atteint un point de stagnation, car les moteurs l'ayant imple- 
mentee (WebKit et Safari) font appel a SQLite, un moteur de bases de donnees rela- 
tionnelles. Or, le W3C demande d'autres implementations afin de pouvoir etablir un 
standard. De plus, il existe plusieurs versions du langage SQL, dont SQL-92 sur 
lequel est base SQLite, qui n'est lui-meme pas une specification, et dont les change- 
ments de syntaxe peuvent affecter le Web ulterieurement. 

Philosophie 

La mise en place d'une base WebSQL suit plusieurs etapes. 

1 Creer et ouvrir une base, en faisant attention a sa version (methode openDatabase). 

2 Initier une transaction (methode transaction ou readTransaction). 

3 Executer une requete SQL dans la transaction (methode executeSQL). 
Le tout s'articule autour de fonctions de callback. 

Les etapes suivantes vont mener a la creation d'une base SQL referencant les coor- 
donnees geographiques (latitude et longitude) de differents lieux. 

Ouvrir une base 

Louverture d'une base provoque sa creation si elle n'existe pas. La fonction 
openDatabase () prend en argument : le nom de la base, sa version, une description 
texte, et la taille allouee en octets. 

Ouverture d'une base 

<div id="affichage"x/div> 
<scri pt> 

i f( ' openDatabase ' in window) { 
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var db = openDatabase( ' BaseCeo ' , '1.0', 'Emplacements geographiques ' , 
1024*1024) ; 
} else { 

alert("Base WebSQL non supportee par ce navi gateur") ; 

} 

</scri pt> 

Le numero de version est un choix arbitraire et permet de gerer les differences de 
structure des tables si celles-ci evoluent dans le temps. Si la taille allouee depasse 
5 Mo, le navigateur peut afficher un avertissement pour l'utilisateur et lui demander 
son autorisation. 

L'ensemble retourne un objet de type Database. 

Initier une transaction 

La methode transact! on () debute une transaction, c'est-a-dire un contexte dans 
lequel vont se succeder une ou plusieurs requetes SQL. Cette methode accepte pour 
seul parametre une fonction de callback, qui recoit a son tour en argument l'objet 
relatif a la transaction. 

Ouverture d'une transaction 

db . transact! on (f unction (sql trans) { 
// Requetes . . . 

}); 

Cet objet de type SQLTransaction est necessaire pour 1' execution de requetes. 

Creer une table 

Enfin, la methode executeSql () de la transaction est destinee, comme le suggere 
son nom, a recevoir une requete sous la forme d'une chaine de texte, tout en respec- 
tantla syntaxe SQL (voire SQLite) avec CREATE TABLE. 

Creation d'une table dans une transaction 

db .transact! on (function (sql trans) { 

sql trans. executeSql ('CREATE TABLE IF NOT EXISTS geo (id INTEGER 
PRIMARY KEY ASC, lat FLOAT, lng FLOAT, alt FLOAT, desc TEXT) ',[]); 

}); 

Dans cet exemple, la table geo est creee si elle n'existe pas deja, avec les champs id 
(nombre entier, cle primaire), 1 at (nombre a virgule flottante), 1 ng (nombre a virgule 
flottante) et desc (texte). 
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Le deuxieme argument n'est pour le moment pas exploite et reste un ensemble vide 
[] , car la requete ne comprend pas de parametres variables. 

Au besoin, il sera toujours possible de supprimer la table avec DROP TABLE, si la ver- 
sion a change ou qu'il faut reinitialiser la structure de la table. 

db. transact! on (function (sql trans) { 

sql trans. executeSql (' DROP TABLE geo ',[]); 

}); 

Inserer des donnees 

La table est prete a recevoir des donnees, egalement avec executeSql () et l'instruc- 
tion INSERT. Pour construire la requete, il est cette fois possible d'indiquer des para- 
metres avec le signe « ? », qui seront remplaces un par un par les valeurs transmises 
avec le deuxieme argument. 

db. transact! on (function (sql trans) { 

sql trans . executeSql ( ' INSERT INTO geo (1 at , 1 ng , al t , desc) VALUES 
(?,?,?,?)' , ['48.58177' , '7.750555' , ' 142 ',' Strasbourg ']) ; 

sql trans. executeSql ('INSERT INTO geo (1 at , 1 ng , al t , desc) VALUES 
(?,?,?,?)' , ['48.458807' , '-5. 088043 ', '19' , 'Ouessant ' ] ) ; 

}); 

Les quatre champs sont remplis, il ne reste plus qua consulter le contenu final de la table. 

Exploiter les resultats 

La methode executeSql () continue a faire parler d'elle, en collaboration avec l'ins- 
truction SELECT. Le deuxieme argument reste vide [] , car il n'y a pas de parametre a 
preciser, et un troisieme voit le jour sous la forme d'une fonction de callback, rece- 
vant l'objet de transaction et le jeu de resultats de type SQLResul tSet. 

Selection d'un jeu de resultats 

db. transacti on (function (sql trans) { 

sql trans. executeSql ('SELECT * FROM geo',[], 
function(sqltrans, result) { 

// Longueur du jeu de resultats Q 
var nb = result. rows. length; 

var i ; 

// Boucle d' iteration Q 
for (i =0; i < nb; i++) { 
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// Constitution du texte a afficher Q 
var texte = 

"<b>"+resul t . rows . item(i) . desc+"</b>" 
+" a pour coordonnees (" 
+resul t . rows . i tem(i) . 1 at+" , " 
+result.rows.item(i) .lng+") " 

+" et pour altitude "+resul t . rows . item(i) . al t+"m" ; 
// Affichage du texte sur la page Q 

document. getElementByld('affichage') .innerHTML += texte+"<br>" ; 

} 

}) ; // executeSQL 
}) ; // transacti on 

Les proprietes du resultat renseignent sur les lignes retournees (rows, de type 
SQLResul tSetRowLi st), dont on peut connaitre le nombre avec 1 ength Q. Une simple 
boucle for et nous voila partis pour parcourir les lignes une par une © en iterant sur i . 
Le membre rows . i tem(i ) retourne la ligne existant a l'index i , et chacune de ses pro- 
prietes, dont le nom correspond a celui d'un champ de la table, renvoie sa valeur Q. 



Figure 16-8 

Resultat affiche 



Ouessant a pour coordonnees (48.458807,-5.088043) et pour altitude 19m 
Strasbourg a pour coordonnees (48.58177,7.750555) et pour altitude 142m 



Le tout est regroupe dans une chaine de texte injectee dans le DOM ©, par souci de 
simplicite. Par la suite, tout est possible : insertions depuis un formulaire HTML ou 
depuis les donnees recues avec Ajax, Server-sent Events, Web Sockets, et d'autres 
API. Les selections acceptent tout ce qui fait l'interet de SQL, notamment le tri avec 
la clause ORDER BY. 

Requete avec tri 

sql trans. executeSql ('SELECT * FROM geo ORDER BY 
alt' , [] ,function(sqltrans, result) { 
// Resultats tries... 

} 

Perspectives 

Cette facon d'exploiter une base locale reste familiere pour ceux qui sont aguerris aux 
developpements cote serveur avec MySQL, PostgreSQJL, et equivalents. II est etonnant 
de constater qu'un besoin reel a mene a une implementation rapide dans WebKit, Opera 
et la plupart des moteurs mobiles, d'un « standard » qui se voit desormais voue a une exis- 
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tence incertaine. Pourtant, ces moteurs vont probablement le conserver a moyen terme, 
mais les autres s'orienteront vers IndexedDB. Dilemme, me direz-vous ? 



Prise en charge 



Navigateur Version 


Mozilla Firefox 




Internet Explorer 




Google Chrome 


4+ 


Apple Safari 


3.2+ 


Opera 


10.6+ 



Tableau 16-2 Tableau de support WebSQL 
Navigateur 



Version 



iOS 


3.2+ 


Android 


2.1 + 


Opera Mobile 


11 + 


Opera Mini 





Reportez-vous au site d'accompagnement pour des informations mises a jour. 
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Un seul reseau Wi-Fi vous manque et tout vous parait depeuple. Pourvue 
d'un cache d'application, une application web peut fonctionner en mode 
deconnecte. 




Figure 17-1 Deconnexion en perspective 
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Malgre une disponibilite croissante du reseau Internet en phase de mobilite, il arrive 
que le navigateur soit amene a etre sollicite lorsqu'aucune connexion n'est disponible. 

C'est particulierement le cas des applications web qui tendent a remplacer un certain 
nombre d'applications classiques, par exemple dans la bureautique, la gestion des e- 
mails et des agendas. Elles sont faciles a deployer, car elles reposent sur des langages 
web eprouves (HTML pour le contenu, CSS pour la presentation, JavaScript pour 
l'interaction) et la plupart du temps font appel a un stockage sur un serveur en ligne. 
Des milliers d'utilisateurs peuvent les exploiter sans se soucier de logiciels specifiques 
a installer et de leur compatibilite - dans un monde ideal oil tout un chacun dispose- 
rait d'un navigateur relativement recent. 

La simplicite d'acces des applications web dans un navigateur depuis n'importe oil 
dans le monde est leur grande force. Mais aussi leur faiblesse. 

La disponibilite de ces applications devient critique lorsque l'utilisateur sort de sa 
zone de couverture (Wi-Fi, reseaux de telephonie mobile, etc.). Le but est de les 
rendre utilisables durant cette periode, puis eventuellement de synchroniser a nou- 
veau les informations lors du retour de la connexion. 



Principe 

Les concepteurs web peuvent definir une liste de fichiers qui sont requis par l'appli- 
cation pour continuer a fonctionner en mode deconnecte. Cette liste qui officie un 
peu comme un fichier de configuration est nommee manifeste. Ces fichiers seront 
maintenus par le navigateur dans un espace de cache specifique pour les avoir « sous 
la main » meme lorsqu'il est hors ligne. 



Figure 17-2 

Fonctionnement deconnecte 



Cache 
local 



html 



media* 



Manifeste 



Evenements DOf\ 
online/offline 



Document 
HTML 



Connexion 
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L'API fournie en complement permet au travers d'evenements declenches par le 
navigateur de connaitre le statut de la connexion et de modifier en consequence le 
comportement de la page, afin de : 

• ne pas demander de fichier stocke en ligne (done non specifie dans le manifeste) 
qui declencherait une erreur et une indisponibilite de certaines fonctionnalites de 
l'application ; 

• signaler a l'utilisateur qu'il travaille en mode deconnecte. 

II appartient ensuite au developpeur web de prendre les dispositions necessaires pour : 

• stacker les donnees eventuellement modifiees, creees, supprimees : e'est la que - 
merveille de la nature - Web Storage et IndexedDB/WebSQL interviennent ; 

• resynchroniser ces donnees ulterieurement en verifiant leur perennite. 

Specification Offline Web Applications 

La specification sur le site du W3C 

► http://www.w3.org/TR/html5/offline.html 

Une note du W3C sur la philosophie des applications web hors ligne 

► http://www.w3.org/TR/offline-webapps/ 
La specification sur le site du WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/complete/offline.html 



ligne ou hors ligne ? 

La propriete navi gator. onLine retourne false si le navigateur sait qu'il ne sera pas 
en mesure de posseder une connexion active, que ce soit pour le chargement de pages 
lorsque l'utilisateur cliquera sur un lien, ou pour le declenchement d'un telecharge- 
ment par un script. Inversement, sa valeur est true pour signifier qu'il est bien con- 
nects (ou se considere comme tel). 

Detection du statut du navigateur 

i f (navi gator . onLi ne) { 

// Mode connecte 
} else { 

// Mode deconnecte 

} 

Lorsque cette valeur change d'un etat a l'autre, la specification decrit deux types 
d'evenements declenches selon le cas de figure : 

• of f 1 i ne : lorsque le navigateur passe en mode deconnecte ; 

• on! i ne : lorsque le navigateur retrouve la connexion. 
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lis dependent toujours de l'objet navigator (ou window. navigator). On peut enregis- 
trer un gestionnaire d'evenement dans les deux cas, pour declencher une fonction en 
charge de prendre les dispositions vis-a-vis des donnees et de la notification a I'utilisateur. 

Detection du changement de statut du navigateur 

// Enregi strement des evenements 
if (window. addEventLi stener) { 

wi ndow. addEventLi stener ("onl ine" , estOnl i ne , f al se) ; 

wi ndow. addEventLi stener("offl ine" , estOf f 1 i ne , fal se) ; 
} else { 

document . body .ononl ine = estOnline; 
document. body .onoffl ine = estOffline; 

} 

function estOnlineO { // Le navigateur est connecte } 
function estOfflineQ { // Le navigateur est deconnecte } 



Attention Connexion et connexion 

Cette methode peut ne pas etre fiable. En effet, le navigateur et le systeme d'exploitation peuvent etre 
connected a un reseau local sans I'etre a Internet (cas de certains reseaux internes d'entreprise). 

Une simulation tres simple peut etre realisee pour declencher ces evenements avec 
Mozilla Firefox, Opera et Internet Explorer, a l'aide de l'option Travailler hors con- 
nexion dans le menu Fichier. 



Figure 17-3 

Travailler hors ligne 



,gle: 

er la navigation pm4 
ftfifion f^j 
Rechercher dans la page... 

Envoyer un lien vers la page... 

Developpement Web 



Plem ecran 
Configurer Syni 
Quitter 



Marque-pages 

Historique 

Telechargements 

Modules rjrpen 

Options 

Aide 



Console Web 
Bloc-notes 
Code source de la page CtrE+U 
Console d'erreurs Ctd+Maj+J 
Obtenir d'autres outils 
Encodage des caracteres ► 
Travailler hors o 



Ctd+Maj+K 
Maj+F4 



D'autres navigateurs se fient a la gestion du reseau par le systeme d'exploitation. 
Chrome reagit lorsque la carte reseau est desactivee, le Wi-Fi indisponible, etc. 
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Structure complete 

Grace aux methodes decrites precedemment, il est tres simple de mettre en place un 
document detectant son propre statut. A la fois initialement dans la phase de charge- 
ment, et a la fois dynamiquement si le navigateur detecte une deconnexion ou une 
reconnexion. 

Page d'information sur I'etat de connexion 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Offline Web Applications</title> 
<meta charset="utf-8"> 

<1 "i nk rel="stylesheet" href="styles.css" type="text/css"> 

</head> 

<body> 

<d"iv cl ass="wrap"> 

<p>le suis <span id="statut">(aucune i dee)</spanx/p> 
</di v> 
<scri pt> 

var statut = document . getEl ementById( ' statut ') ; 

// Detection initiale Q 
if (navigator. onLine) { 

// Mode connecte 
statut . i nnerHTML = 'connecte 1 ; 
statut . cl assName = 'online'; 
} else { 

// Mode deconnecte 

statut . i nnerHTML = 'deconnecte'; 

statut . cl assName = 'offline'; 

} 

// Enregi strement des evenements Q 
if (window. addEventLi stener) { 

// Pour les navigateurs supportant addEventLi stener 

wi ndow. addEventLi stener ("onl ine" , estOnl ine , fal se) ; 

wi ndow. addEventLi stener ("of fl ine" , estOffl ine, fal se) ; 
} else { 

// Pour les autres 

document. body. ononl ine = estOnline; 

document. body. onoffl ine = estOffl ine; 

} 
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function estOnl ine() { 

// Le navigateur est connecte Q 

statut . i nnerHTML = 'passe en mode connecte'; 

statut . cl assName = 'online'; 

} 

function estOfflineO { 

// Le navigateur est deconnecte Q 

statut . i nnerHTML = 'passe en mode deconnecte'; 

statut . cl assName = 'offline'; 

} 

</scri pt> 

</body> 
</html> 

La consultation de navi gator. onLine renseigne a un moment donne Q, c'est-a-dire 
directement au chargement si le script est execute sans delai. L'ajout de gestionnaires 
d'evenements © surveille tout changement d'etat et appelle les fonctions appropriees 
le cas echeant. 

Les actions entreprises dans l'un et l'autre cas sont la modification du contenu texte 
de l'element <span> et de sa classe pour lui affecter un style different (defini dans la 
feuille de style). 



Figure 17-4 

Plusieurs etapes 



□ HTML5 :Oftline Web Applications 



Je suis connecte 



Je suis 



passe en mode deconnecte 



Je suis passe en mode connecte 



Liste des fichiers a mettre en cache (manifeste) 

La liste les fichiers necessaires au bon fonctionnement de la page HTML (de l'appli- 
cation web) est donnee dans le manifeste afin de les stocker en cache pour une dispo- 
nibilite hors connexion. II s'agit d'un simple fichier texte lie au document via 
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l'attribut mani f est de la balise ouvrante <html >. L'inventaire se fait ligne par ligne, et 
concerne la plupart du temps des ressources images, JavaScript, CSS, polices de 
caracteres, ou d'autres fielders HTML. 

Declaration du manifeste dans le code HTML 
<html manifest="offl ine.appcache"> 

La ligne de code precedents fait reference au fichier off! i ne . appcache. Par conven- 
tion, il est preferable d'utiliser l'extension appcache , bien que toute autre denomina- 
tion soit possible. 

En revanche, ce fichier doit imperativement etre servi avec un en-tete HTTP Content- 
Type precisant le type MIME text/cache-manifest. On peut aisement modifier le 
comportement par defaut avec un fichier . htaccess place dans le repertoire concerne. 

Fichier .htaccess 

AddType text/cache-manifest .appcache 

Cette instruction ajoutera le bon type MIME a tout fichier disposant de l'extension 
.appcache. Cela etant valable pour Apache, reportez-vous a la documentation pour 
les autres serveurs web. 

Syntaxe pour le manifeste 

La syntaxe du manifeste est extremement simple. Le fichier debute par une ligne 
CACHE MANIFEST. Les commentaires debutent par un caractere diese « # » et suivent 
une ou plusieurs sections de type CACHE, NETWORK ou FALLBACK. 

Exemple de manifeste 

CACHE MANIFEST 

# VERSION 1 

styl es . ess 
script. js 
image.jpg 

La page appelant le manifeste peut y etre omise puisque Ton considere que, si elle 
necessite des ressources en cache, elle est egalement concernee. 

Si le telechargement du manifeste lui-meme ou de l'un de ses fichiers echoue, le pro- 
cessus entier est stoppe. Le navigateur peut alors continuer a utiliser la precedente 
version du cache, s'il en existe une. 
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Figure 17-5 

Demande d'autorisation 
de stockage hors ligne 
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Ce site Web (localhost) demande de stacker des donnees sur 
voire ordinateur pour une utilisation hors connexion. 


| Autoriser | | Jamais pour ce site J | Pas pour cette fois J x 









Chaque site (ou plutot chaque domaine) est limite a 5 Mo de donnees stockees de la 
sorte, avec une approbation demandee par le navigateur, ce qui peut sembler raison- 
nable de prime abord, mais une limite non negligeable dans le cadre d'une applica- 
tion complexe avec des fichiers medias (images). Une precaution doit etre toujours 
prise pour eviter que l'espace requis ne croisse exponentiellement a long terme, et 
pour reduire la liste des fichiers a ceux strictement necessaires. A long terme, les 
navigateurs evolueront probablement vers un systeme d'autorisations et d'exceptions 
pour les applications web necessitant un espace complementaire. 

La section CACHE 

Par defaut, si aucune section nest mentionnee en amont, les ressources indiquees se 
trouvent dans le cache explicite. 

Exemple de manifeste 

CACHE MANIFEST 

# VERSION 2 

CACHE: 

styles. ess 
script. js 
photos/photol . j pg 

http : //aj ax . googl eapi s . com/ajax/1 i bs/j que ry/l/j query .mi n . js 

Ce manifeste fait mention de trois fichiers places dans le meme repertoire que celui 
de l'application HTML et d'une librairie j Query hebergee sur un serveur distant. II 
peut etre fait mention de sous-repertoires, ou de chemins absolus. 

La section NETWORK 

La section NETWORK indique les ressources qui necessitent imperativement une con- 
nexion. Cela signifie que tout appel a ces adresses - ne pouvant etre placees en 
cache - provoquera une tentative de connexion et une erreur si le navigateur est en 
mode deconnecte. 
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Exemple de manifeste avec NETWORK 

CACHE MANIFEST 

• VERSION 3 

CACHE: 
styles. ess 
script. js 
photos/photol. jpg 

NETWORK: 

i denti f i cati on . php 
http://api .twitter.com 

La section FALLBACK 

Tout ce qui est place dans la section FALLBACK fait figure de ressource de repli. La syn- 
taxe change quelque peu puisqu'il s'agit de faire reference en une ligne a la ressource ini- 
tiate, separee d'une espace par l'alternative. C'est cette deuxieme qui sera chargee en lieu 
et place de la premiere lorsque le navigateur se considerera en mode deconnecte. 

Exemple de manifeste avec FALLBACK 

CACHE MANIFEST 

• VERSION 4 

CACHE: 
styl es . ess 
script. js 
photos/photol. jpg 

FALLBACK: 

styles. ess styles-offline. ess Q 
realtime. php info-offline.html Q 
photos/ horsl igne.png Q 

Le cache explicite ne change pas, mais la section de repli indique au navigateur : 

• d'utiliser le fichier styles-offline. ess lorsqu'il n'est pas en ligne, pour toute 
volonte d'acces a styles. ess Q. Lapparence de l'application pourra done chan- 
ger si elle se trouve onl i ne ou of f 1 i ne ; 

• si real ti me . php n'est pas accessible ©, par exemple pour une messagerie ou les cours 
de la Bourse en temps reel, un document statique nomme i nfo-of f 1 i ne . html sera 
servi. Ce dernier pourra contenir un avertissement, une explication, ou une alternative 
temporaire faisant appel au stockage local avant de retrouver la connexion ; 

• d'utiliser une seule image de remplacement horsl igne.png pour toute tentative 
d'acces aux fichiers heberges dans le repertoire photos/ 0. 
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Exemple de manifeste avec CACHE, NETWORK et FALLBACK 

CACHE MANIFEST 

# VERSION 2011-08-09 

# Cache explicite 
CACHE: 

styles. ess 
script. js 
photos/photol . j pg 

# Ressources necessitant une connexion 
NETWORK: 

i denti f i cati on . php 
http : //api . twi tter . com 

# Ressources alternatives 
FALLBACK: 

styles. ess styles-offline. ess 
real time. php info-offline.html 
photos/ horsl i gne . png 



Elaboration et test du cache sous Chrome et Firefox 

La construction du cache peut etre diagnostiquee avec une console, entre autres celle de 
Chrome qui recense toutes les actions entreprises et permet de diagnostiquer une even- 
tuelle erreur. Si l'enregistrement d'un fichier provoque une erreur 404 (s'il n'a pas ete 
trouve), alors la construction entiere du cache est remise en cause et peut s'interrompre. 



Figure 17-6 

Journal de la construction 
dans la console 



l : Elements Resources 



<5> 



Scripts l£^f Timeline ^ Profiles ^Audits I j/jj Console 1 
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Creat 
Appli 
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ing Application Cache with manifest http : // v.,i,v, , dcirainel , con/ c--line, ; -allback , app cache 
cation Cache Checking event 
cation Cache Downloading event 



cation Cache Progress event (0 of 6) http 

cation Cache Progress event (1 of 6) http 

cation Cache Progress event (2 of 6) http 

cation Cache Progress event (3 of 6) http 

cation Cache Progress event (4 of 6) http 

cation Cache Progress event (5 of 6) http 

cation Cache Progress event (6 of 6) 
cation Cache Cached event 



//www. domain el . com/off line /script . js 
//www .domaine! . com/off line /photos/phot ol . jpg 
//www .dona in el . com/off line /styles .ess 
/■■■i-ii-. , den- a in el . ccn - / c'-line/ st-.- les -c~- line , ess 



//www .domain el . ccir/c--line/in"c- c-~line . html 



I / ,■,.- ,-, , dgnaingl . ■:cT, , c--line/hc-sligne . png 



Une vue plus detaillee du contenu peut etre obtenue, domaine par domaine, dans 
l'onglet Resources. Les fichiers sont classes par type (manifeste, fichier maitre appe- 
lant, fallback, cache explicite, etc.) et par taille. 
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Figure 17-7 

Vue synthetique du cache 
Google Chrome 



Elements I ^) Resources I Network ^jjj Scripts 



+ Q Frames 
r i \ Databases 

► §| Local Storage 

► §| Session Storage 
* [if Cookies 

▼ Application Cache 
=j lacalhO'St 



httpi/Avww.domai ne1 .com/ofFI in &/f al I be.ck.appcache 


Type 
Manifest 


Size 

4S4E 


httpi/Avww.domai ne-1 com/offl inaifal I beck, html 


Master 


E43B 


httpi.'VwttiY.domai ne1 .conVoffl ina'hasl ig ne. png 


Fall bank 


5.51 KB 


http:tfwww.domai nel .conVoff 1 ine'i nfo-offl i ne. html 


Fall bant 


833B 


http:^'www.domai ne1 .coriVaffline phctci -phc-tol.jpfl 


Explicit 


52.71 KB 


http://www.domai ne1 .com'offl ina'aai pt.js 


Explicit 


1 .21 KB 


http:;VSvww.dcn:aine1 .ccrr ;fflir= stj-'lss-cfflire.c&s 




933 Q 


http:/Avww.domai ne1 .□onVofflina , 'stj'les.c5s 


Explicit 


9D7B 



L'onglet Network affiche la mention « (from cache) » au chargement de la page pour 
les ressources piochees dans le cache d'application. 

Sous Chrome toujours, l'adresse chrome ://appcache-i internals donne acces a un 
controle individuel des caches crees par les applications, domaine par domaine. 



Figure 17-8 

Controle des caches internes 
sous Chrome 
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Remove this AppCache | 
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* Last Update Time: mardi 9 aeut 2011 01:59:42 



Sous Firefox, un equivalent accessible avec about : cache?devi ce=off tine donne un 
resume de l'espace occupe, de l'espace restant et de la liste des fichiers caches. 



Figure 17-9 

A propos du cache offline 
sous Firefox 
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Mise a jour du cache 

Le navigateur ne precede pas automatiquement a la recherche de nouveaux contenus, 
meme s'il est en ligne. Plusieurs cas pourront cependant declencher de nouveaux 
telechargements : 

• Si le fichier de manifeste change. Pour cela, il suffit d'en modifier la teneur, voire 
une ligne de commentaire. C'est pourquoi il est en general conseille de specifier 
un numero de version # VERSION Xou une date* VERSION YYYY-MM-DD a modifier 
en cas de besoin pour titiller le cache. 

• Si I'utilisateur efface son cache. 

• Si la mise a jour du cache est volontairement declenchee par l'API JavaScript. 

Toutefois, si le telechargement du fichier de manifeste echoue a un moment ou un 
autre, ou bien qu'un des fichiers de ressources (CSS, JavaScript, images, etc.) ne peut 
etre obtenu, la mise a jour complete est consideree comme inexploitable. Le naviga- 
teur choisit alors de continuer a utiliser l'ancienne version du cache si elle existe. 

Une difficulte persiste pourtant, car la gestion du cache HTTP conventionnel vis-a- 
vis du manifeste est laissee a la libre appreciation du serveur web. Ce dernier peut 
tres bien decider que ce fichier statique n'a pas de raison d'etre renvoye au navigateur, 
en delivrant un en-tete 304 (Not Modified). Une technique consiste a completer le 
fichier . htaccess pour parer a une eventuelle mise en cache du manifeste lui-meme. 

.htaccess pour I'expiration instantanee des fichiers de manifeste 

AddType text/cache-manifest .appcache 

<IfModule mod_expi res . c> 
Expi resActi ve on 

Expi resByType text/cache-manifest "access" 
</IfModule> 

Cette configuration utilise le module expires s'il est active, pour definir une expiration 
des fichiers de manifeste a la date du dernier acces par le navigateur. La maitrise des 
instructions de cache HTTP est delicate, il vous faudra au besoin consulter la docu- 
mentation du serveur au sujet de l'en-tete Cache-Control. 



L'API Application cache 

Les applications web hors ligne sont epaulees par l'API Application Cache qui offre 
un controle plus fin des ressources et du processus de mise a jour. Insistons sur un 
point : elle ne controle que le cache d'application defini dans le manifeste, et n'a 
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aucune portee sur le cache interne du navigateur qui reste actif et qui existait bien 
avant l'arrivee de HTML 5. 

L'API est accessible via l'interface window. applicationCache qui dispose de plu- 
sieurs methodes, evenements et une propriete d'etat. 

Proprietes 

La propriete status reflete l'etat du cache d'application a un moment donne. Elle 
prend les valeurs de constantes definies par l'API. 







Tableau 17-1 


Proprietes ApplicationCache 


Propriete 


Valeurs 






status 


wi ndow.appl icationCache . UNCACHED : pas de cache associe. 

wi ndow . appl i cati onCache . IDLE : sans activite, le cache n'est pas marque comme obsolete. 

window. applicationCache. CHECKING : en coursde verification. 

wi ndow . appl i cati onCache . DOWNLOADING : en phase de telechargement. 

wi ndow . appl i cati onCache . UPDATEREADY : mise a jour prete. 

wi ndow . appl i cati onCache . OBSOLETE : cache marque comme obsolete. 



Interrogation du statut 

if (window. appl icationCache. status == window. appl icationCache. IDLE) { 

// Un cache est utilise 

} 



II est plus aise de se fier aux evenements correspondants qui surgissent aux moments 
opportuns. 

Evenements 

Les evenements declenches par l'interface window, appl icationCache indiquent 
l'etat de la gestion du cache par le navigateur, en fonction de la fraicheur des fichiers 
et du manifeste. 



Tableau 17-2 Evenements DOM ApplicationCache 



Evenement 




onchecki ng 


Le navigateur verifie si une mise a jour du manifeste est disponible. II s'agit toujours du pre- 
mier evenement declenche. 


onnoupdate 


Le manifeste n'a pas change. 


ondownl oadi ng 


Une mise a jour du manifeste et des ressources est en cours de telechargement. 


onprogress 


Le navigateur telecharge les ressources. 
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Tableau 17-2 Evenements DOM ApplicationCache (suite) 


Evenement 


Correspondance 


onupdateready 


Les nouvelles ressources ont ete telechargees et le script peut utiliser la methode 
swapCache() pour passer au nouveau cache. 


oncached 


Les nouvelles ressources ont ete telechargees et le script peut considerer que I'application est 
en cache. 


onobsolete 


Une erreur 404 ou 410 a ete obtenue a la place du manifeste, le cache est efface. 


onerror 


Une erreur est survenue lors du telechargement du manifeste, de la page principale ou des 
ressources. 



Ces etapes sont a surveiller avec precision lors du developpement d'une application 
en ligne et hors ligne, car une erreur de manifeste peut vite mener a un blocage. 

Par defaut, lors de l'acces a un document HTML equipe de l'attribut manifest, une 
verification est effectuee et un evenement checki ng declenche. Selon les instructions 
contenues dans le manifeste, un evenement noupdate peut suivre si le navigateur 
decide qu'aucune modification n'a ete apportee. 



Figure 17-10 

Fonctionnement deconnecte 



downloading 



updateO ou 
premiere visite 



^ progress 

nouveau manifeste 



En cache 




Si le manifeste n'a jamais ete rencontre par le passe, depuis la page courante ou depuis 
une autre y faisant appel, le navigateur complete le cache suite a un evenement 
downl oadi ng , et declenche un evenement cached a la fin si tout s'est bien deroule. 

Si le manifeste a deja ete rencontre, mais a ete mis a jour depuis, le navigateur tele- 
charge les nouvelles ressources en declenchant downloading, les place en attente et 
signifie qu'une mise a jour globale est disponible avec un evenement update ready. 

window. applicationCache. onupdateready = functionO { 

alert("Une nouvelle version de I'application est disponible"); 

}; 
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Methodes 

Tableau 17-3 Methodes ApplicationCache 



Evenement Correspondance 


update() 


Lance le processus de mise a jour du cache. 


abort() 


Annule le processus de telechargement. 


swapCache() 


Passe au cache d'application le plus recent s'il existe, ou lance une exception INVALID_STATE_ERR. 



Les methodes declenchent des phases importantes pour le cache d'application 
HTML. La fonction update () lance une verification « volontaire » de la presence d'un 
nouveau manifeste, d'ou un retour a la phase checki ng puis download! ng s'ily a lieu. 

wi ndow . appl i cati onCache . update() ; 



Si le statut de wi ndow. appli cati onCache correspond a la valeur 
wi ndow. appli cati onCache . UPDATEREADY, ou plus simplement qu'un evenement 
update ready est genere, alors le cache est en etat de passer a une nouvelle version 
grace a la fonction swapCacheC). 

window. appli cati onCache. onupdateready = functionO { 
wi ndow . appl i cati onCache . swapCache () ; 

}; 



Figure 17-11 

Trois etapes pour 
un nouveau manifeste 



/|Q HTML5 i Offline WebAppli. x ^ 

«- an | o 

Je suis connecte 

Checking... 
Downloading. . 
Update ready. 



I^Etements Resources Network Scripts ^flfrneline _gConsote' 

f^i^ | Errors Warnings Logs 

Application Cache Progress event (7 of &) 

Application dacha Progress event (S of B) 

Application Cache UpdateReady event 
> window .applicationCache . swapCache ( ) 

o|e 



Un petit inconvenient subsiste cependant, car ces fonctions updateO et swapCacheC) 
ne rechargent pas dynamiquement les ressources dans la navigation active. Cette pre- 
caution evite a l'utilisateur de perdre des donnees sur lesquelles il serait en train de 
travailler. Le navigateur a pourtant telecharge le nouveau manifeste durant ce temps 
et mis a jour les fichiers presents dans le cache. En l'etat, le document necessite d'etre 
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rafraichi deux fois : la premiere pour decouvrir un nouvel ensemble de cache et le 
stocker, la deuxieme pour l'exploiter. 

Une technique alternative consiste a suggerer un rafraichissement des le chargement 
du document, uniquement dans le cas oil swapCache() a ete appele. 

Declencher un rafraTchissement 

window. applicationCache.onupdateready = functionO { 

i f (wi ndow . appl i cati onCache . status==wi ndow. appl i cati onCache . UPDATEREADY) { 
wi ndow . appl i cati onCache . swapCache () ; 

if (confi rm("Une nouvelle version de 1\' application est disponible, voulez- 
vous la charger ?")) { 

wi ndow . 1 ocati on . rel oad () ; 

} 

} 

}; 

L'evenement onupdateready est mis a contribution pour appeler swapCache(). Cette 
action etant silencieuse et ne produisant pas de resultat concret pour l'utilisateur, il 
est possible de forcer le rafraichissement du document courant. Celui-ci rechargera 
alors les nouveaux fichiers depuis le cache qui vient d'etre mis a jour. 

En mode deconnecte, la procedure declenchera systematiquement un evenement 
error puisque aucune possibility de rafraichissement des informations du manifeste 
n'est possible. Cela n'empechera bien sur pas de le passer sous silence pour l'utilisa- 
teur et d'exploiter l'application web si elle a correctement ete placee en cache. 



Figure 17-12 

Erreur declenchee en mode 
deconnecte 



Une application hors ligne 

Dans la plupart des cas, pour une application web ne souffrant pas de dependances 
multiples, l'ecriture du manifeste sera aisee et consistera a inventorier les librairies 
JavaScript, les feuilles de styles et les images. 

Une application possible du cache et de la detection de l'etat du reseau est une 
memorisation de donnees lorsque le navigateur est hors ligne, pour les retrouver 
ensuite au retablissement de la connexion. 



B HTM^ : OfflineWebA... X ]^ 
^ ^ O »- | SI Web 



Je suis 


deconnecte 




Checking. _ 
Error. 
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Application minimaliste 

<!doctype html> 

<html lang="fr" manifest="application.appcache"> 
<head> 

<title>HTML5 : Offline Web Appl i cati ons</title> 
<meta charset="utf-8"> 

<1 i n k rel="stylesheet" href="styles.css" type="text/css"> 

</head> 

<body> 

<div class="wrap"> 

<pxtextarea i d="msg"x/textareax/p> 

</di v> 

<script src="appl i cation. js"x/scri pt> 

</body> 
</html> 

Ce document comprend une simple zone d'edition texte <textarea>. 

Manifeste 

CACHE MANIFEST 

# VERSION X 

CACHE: 
styles. ess 
application. js 

Le manifeste liste les fichiers styles. ess pour la presentation et application, js 
pour le caractere dynamique. 

Code source JavaScript de I'application (application.js) 

// Forcer un raf raichi ssement ? 

window. applicationCache.onupdateready = function() { 

i f (wi ndow . appl i cati onCache . status==wi ndow . appl i cati onCache . UPDATEREADY) { 
wi ndow . appl i cati onCache . swapCache ; 

if (confi rm("Une nouvelle version de l\'appli cation est disponible, voulez- 
vous la charger ?")) { 

window. location. reload () ; 

} 

} 

}; 

// Enregistrement des evenements 
if (window. addEventLi stener) { 
// Pour les navigateurs supportant addEventLi stener 
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wi ndow. addEventLi stener ("onl i ne" , estOnl i ne , f al se) ; 
wi ndow. addEventLi stener("offl i ne" ,estOffl i ne, false) ; 
} else { 
// Pour les autres 
document. body. ononline = estOnline; 
document. body. onoff line = estOffline; 

} 

// Stockage local du texte saisi 
function memoriserO { 

var msg = document. getElementByld('msg') .value; 

localStorage.setItem("msg" ,msg) ; 

} 

// Le navigateur est passe en mode connecte 
function estOnline() { 
var msg = localStorage.getItem("msg") ; 

if (confi rm("Vous etes en ligne, recuperer les donnees ?")) { 
document. getElementById( 'msg') .value = msg; 

} 

} 

// Le navigateur est deconnecte 
function estOfflineO { 

alert("Vous etes deconnecte mais je memorise..."); 

memori ser() ; 

} 

Lorsque l'application passe hors ligne, la fonction estOfflineO appelle memoriserO 
pour exploiter 1 interface localStorage. La valeur du champ texte est stockee dans la cle 
msg. 

Lorsque l'application passe en ligne, la fonction estOnlineO retrouve le texte stocke 
dans localStorage a la cle msg et propose de le retablir dans I'element <textarea>. 



Prise en charge 



Navigateur 



Tableau 17-4 Tableau de support Offline Web Applications 
Version 



Mozilla Firefox 


3.5+ 




iOS 


3.2+ 


Apple Safari 


4.0+ 




Android 


2.1 + 


Google Chrome 


5.0+ (partiel) 
14+ (onLine) 




Opera Mobile 


11 + 


Opera 


10.6+ 




Opera Mini 




Internet Explorer 


10+ 
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Retour vers le passe, d'un historique dont l'avenir toujours en mouvement 
est... On verra comment modifier dynamiquement l'historique et assurer la 
coherence de la navigation. 




Figure 18-1 Historique pre-Web 



HTML 5 - Une reference pour le developpement web 

HTML 5 definit des methodes avancees de gestion de l'historique de navigation. Au 
travers des applications web recentes et des conceptions d'interfaces evoluees avec 
Ajax, le surf ne se produit plus de facon lineaire avec un (re)chargement complet de 
la page web des que l'utilisateur decide d'entreprendre une action de navigation. 

Un contenu specifique peut correspondre a une ressource sans adresse (URL ou URI) 
unique. Inversement, une meme adresse peut permettre d'afficher differents types de 
contenus, charges dynamiquement sans passer a une autre page. Dans ce contexte, il 
est difficile pour un internaute de s'orienter et de naviguer dans un historique inexis- 
tant si l'adresse de la page ne change pas. 

DOM et JavaScript ceuvrent de concert pour resoudre ces cas de figure et pour permettre : 

• de naviguer dans l'historique, fonctionnalite supportee depuis les precedentes ver- 
sions de DOM et HTML ; 

• de manipuler l'historique, fonctionnalite introduite par HTML 5. 

II faut cependant toujours garder a l'esprit que les modifications sur cet element essentiel au 
confort de navigation, doivent etre considerees avec precaution et entreprises avec raison. 

Ressource API History au W3C et au WhatWG 

► http://www.w3 .org/TR/htm 1 5/h istory.htm I 

► http://www.whatwg.org/specs/web-apps/current-work/complete/history.html 



Navigation dans l'historique 

History 

L'historique est accessible via history, membre de l'interface window. On peut done 
s'adresser a lui avec wi ndow. hi story ou hi story tout court. II s'agit en realite d'une 
interface de type History. 

II est possible d'en connaitre la longueur - la quantite d'adresses memorisees durant 
la session - grace a la propriete hi story, length. Lors de la navigation par onglets, 
on considere bien entendu que Ton dispose d'un historique specifique par onglet. 

alert("L'historique comporte "+hi story . 1 ength+" adresse(s) ") ; 

Trois methodes existent pour se deplacer dans l'historique : 
history. go(de7ta) ; 
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Figure 18-2 

Resultat de I'instruction sous 
Google Chrome 



£ Page surwww.w3.org says: 



"Oil 



L'historique comportel adressefs] 



Cette fonction prend en argument le nombre de pas qu'il faut realiser dans l'index de la 
session, relativement a la page courante. Une valeur negative permet de se deplacer dans 
le passe, ainsi -1 fait reference a la page precedemment visitee, -2 a l'avant-derniere, et 
ainsi de suite. Les valeurs positives operent un deplacement dans le sens inverse (si tou- 
tefois l'utilisateur dispose d'un historique positif et qu'il est done en train de consulter 
une page pour laquelle il a du revenir en arriere). Un delta nul rafraichit la page. 

hi story . backO ; 

Cette methode permet de retourner a l'index precedent dans 1'historique : est equiva- 
lent a history. go(-l) ; 

hi story . forwardO ; 

Cette methode permet d'avancer a l'index suivant dans l'historique : est equivalent a 
hi story. go(l) ; 



Location 



Parallelement a l'interface History, existe Location que Ton retrouve exploitee dans 
window. location. Cette interface regroupe toutes les informations a propos de 
l'adresse (URL) du document charge dans le navigateur, et permet de la changer 
pour naviguer vers d'autres horizons. 

Les proprietes de window. location sont directement accessibles et exploitables. Par 
exemple, window. location. href contient l'adresse complete. Notons que cette 
interface est aussi accessible via document . 1 ocati on. 



Propriete 



hash 



host 



hostname 



Tableau 18-1 Proprietes de Location 

Role Exemples 

Partie de I'URL qui suit le caractere #. 
Nom d'hote et numero de port. 
Nom d'hote seulement. 



#resul tat 



www . googi e . com : 80 



www.google.com 
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Tableau 18-1 Proprietes de Location (suite) 



Propriete 


Role 


Exemples 


href 


URL complete 


http : //www . googl e . com : 80/ 
recherche?mot=lol cat#resul tat 


pathname 


Chemin relatif a I'hote 


/recherche 


port 


Numero de port 


80 


protocol 


Protocole utilise 


http: 


search 


Partie suivant le caractere « ? » (inclus) 


?mot=lolcat 



Modifier wi ndow. location .href revient a se rendre a la nouvelle adresse. 
| wi ndow. 1 ocati on . href = "http://www.alsacreations.com/"; 

Des methodes equipent l'interface. 

Tableau 18-2 Methodes de Location 

Methode Role 



assign(url) 


Equivaut a charger une nouvelle adresse URL. 


reload(get) 


Recharge le document courant. Si get est a true, force le navigateur a ne pas utiliser le 
cache. 


replace(url) 


Remplace le document courant par celui de I'adresse URL sans le sauver dans I'historique. 



Tout cela convient a une gestion basique de la navigation en JavaScript. Attention 
cependant a ne pas baser la navigation uniquement sur ce principe dynamique, sans 
conserver - lorsque c'est possible - une version classique a l'aide des liens conven- 
tionnels <a href="">. Ces liens sont l'essence du H de HTML. Une modification 
de ce type de comportement peut derouter un visiteur s'il ne peut se servir des 
signets, de l'ouverture dans un nouvel onglet dans son navigateur, ou de I'historique 
complet, comme il a l'habitude de le faire. 



Modification dynamique de I'historique 

En complement de ces methodes deja bien repandues, ont ete introduites les 
methodes hi story. pushStateO et history. replaceStateO qui respectivement 
ajoutent et modifient des entrees dans I'historique. Elles vivent en osmose avec l'eve- 
nement wi ndow. onpopstate qui survient a la suite de ces actions. 

Concretement, cela signifie qu'avec HTML 5 il est possible de modifier I'adresse courante 
de navigation, sans provoquer un rechargement complet de document, et sans utiliser d'arti- 
fice avec les ancres « # » ou la technique du hashbang - qui ha rien de reprehensible soit dit 
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en passant. Encore plus concretement, au clic sur un lien, l'adresse du navigateur semblera 
changer sans pour autant que celui-ci n'aille charger une page y correspondant. 

La mise en ceuvre globale de l'ensemble de ce principe de navigation peut fortement 
varier selon le type d'application web developpee. Dans la plupart des cas, on souhai- 
tera modifier le contenu de la page courante suite a un appel Ajax qui effectue un 
chargement distant, ou grace a des donnees stockees dans la page elle-meme (par 
exemple, des onglets donnant acces a differentes vues prechargees dans le document 
HTML, mais simplement masquees). JavaScript est alors fortement sollicite. 

Les methodes presentees ci-apres ne derogent pas a cette regie. Elles se basent toutes 
deux sur des objets d'etat : des structures de donnees variables que Ton est libre de 
constituer et qui definissent l'etat de la page. Par defaut, cet etat possede la valeur 
null au premier chargement, puis se voit attribuer d'autres valeurs choisies par le 
developpeur au fur et a mesure des appels a pushState et replaceState. 

Par la suite, lors d'une navigation volontaire dans l'historique du navigateur, il suffit 
alors a l'evenement popstate de declencher une fonction qui analyse les objets d'etat 
retrouves pour chacune des entrees. Ce renseignement obtenu, la fonction a la charge 
d'adapter dynamiquement le contenu de la page en consequence pour retrouver celui 
qui correspond a l'adresse. 

Figure 18-3 

Principe general 



Objet N-l 
Objet N-2 
Objet N-3 



pushStateO 

Le role de pushState () est de creer une nouvelle entree dans l'historique. Cette 
methode recoit en argument : 

• Un objet d'etat JavaScript, associe a la nouvelle entree d'historique creee. Cet 
objet peut contenir n'importe quelle donnee au choix, permettant de le distinguer 
des autres, et surtout de savoir a quel etat il fait reference, par exemple quel con- 
tenu etait affiche. 

• Un titre, dont l'usage est a la discretion du navigateur et qui peut etre vide. 

• Une adresse URL (facultative), sur laquelle il n'y a pas de verification d'existence ni 
de chargement apres appel a la fonction, mais qui sera affichee dans la barre d'adres- 
ses et dans l'historique. En revanche, le navigateur est susceptible de vouloir la char- 



Evenement DOM 




Page N-l 
Page N-2 
Page N-3 



pushStateO 



a 



□ 

Document 
HTML 







Page N + l 




Page N + 2 


% 


Page N + 3 
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ger s'il est redemarre et si la session a ete memorisee. La nouvelle adresse peut etre 
indiquee de facon relative (a l'adresse courante), mais doit toujours provenir de la 
meme origine. En cas d'omission, l'URL du document courant sera utilisee. 

Exemple 

var etat = { contenu: " recette_kiwi " }; 
hi story . pushState(etat , "Page2", "page2.html"); 

Lorsque l'utilisateur navigue vers un element de l'historique, une copie de l'objet 
etat est retourne a l'evenement popstate. Cela permet alors de savoir, d'apres le 
contenu obtenu, dans quelle phase la page doit se (re)trouver. 

Insistons bien sur ce point : l'adresse peut etre purement fictive, elle n'est pas verifiee. En 
revanche, dans le respect des bonnes pratiques et si vous voulez que le visiteur puisse 
retrouver la page (meme virtuelle) qu'il vient de consulter sur votre site, pensez a prendre 
en charge cette adresse fictive et a ne pas lui faire subir d'erreur 404 ; soit par une redi- 
rection, soit par une reecriture d'URL, soit par une autre detection cote serveur. 

replaceStateO 

La methode replaceStateO fonctionne de la meme maniere, mais modifie 1' entree 
actuelle au lieu d'en creer une nouvelle. Elle recoit en argument les memes parametres. 

Son effet est particulierement adapte, suite a une action de l'utilisateur (ou a un 
evenement) : 

• a la mise a jour de l'objet d'etat ; 

• a la mise a jour de FURL. 

Exemple 

var etat = { contenu: " recette_banane" }; 
hi story . replaceState(etat , "Page3", "page3.html"); 

The king of popstate 

Un evenement popstate est declenche sur l'element global wi ndow a chaque fois que 
l'entree active de l'historique change. La propriete state de l'objet evenement 
recueilli contient une copie de l'objet d'etat qui a ete memorise lors des appels aux 
fonctions precedentes, pushStateO et replaceStateO. Elle possede la valeur null 
s'il s'agit de l'etat initial du document. 

Un gestionnaire d'evenement peut alors etre declare : 

window.onpopstate = function (event) { 
// Utiliser l'objet event 
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// Et surtout sa propriete event . state 
consol e . 1 og(event . state) ; 
} 

Cet evenement peut etre declenche au chargement initial de la page qui compte pour 
une modification d'historique, c'est-a-dire apres l'evenement 1 oad. L'equipe de deve- 
loppement de Mozilla ayant constate des failles dans ce mode de fonctionnement a 
egalement decide qu'il serait possible de declencher popstate durant le chargement 
(avant load) ou bien encore uniquement lorsque le besoin s'en fait ressentir avec 
l'appel des fonctions hi story . back(), history .forwardO et hi story . go(). Cette 
modification a ete apportee a la specification et devrait devenir la regie. 

Pour la phase de developpement et les tests, n'hesitez pas a utiliser la console Java- 
Script pour examiner le contenu de l'objet d'etat. 

Simulation 

En supposant que Ton considere une page hebergee a l'adresse http:// 
www.mondomai ne . com/hi story/i ndex. html et que Ton execute les instructions suivantes. 

Ajout d'une entree dans I'historique 

var etat = { affichage: "#raisin" }; Q 

hi story . pushState(etat , "Arti cl e sur le rai si n" , "Rai si n . html ") ; 

Le navigateur affichera alors en tant qu'adresse courante http://www.mondomaine.com/ 
history/Raisin. html (mais ne verifiera pas la presence d'un tel document). 

Une entree sera ajoutee dans I'historique, associee a etat, l'objet de donnees cree Q. 

Si le visiteur choisit de migrer vers http://www.blup.fr/, puis de revenir a la page prece- 
dente, l'adresse affichee sera bien Raisin.html, la page generera un evenement 
popstate avec une copie de l'objet Q. 

Par defaut, la page « ressemblera » bien a la page i ndex . html initiale et il lui appar- 
tiendra en JavaScript d'adapter son contenu relativement a l'objet recupere, si celui-ci 
lui evoque un etat quelconque quelle peut prendre en charge. En l'occurrence, en 
consultant la propriete af f i chage qui y a ete memorisee. 

window. onpopstate = function(event) { 

i f (event . state ! =nul 1 && event . state . affi chage=="#rai si n") { 
// ... Afficher 1 'article en question 

} 

} 
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Si le visiteur choisit encore une fois de revenir d'un cran en arriere dans l'historique, 
l'adresse sera retablie a http://www.mondomaine.com/history/index.html, I'evenement popstate 
sera declenche avec un objet null. Dans ce cas de figure egalement, le contenu du docu- 
ment n'est pas altere, mais il lui appartient de prendre les dispositions relatives a I'evene- 
ment popstate et de cet objet null pour savoir qu'il doit revenir dans son etat par defaut. 

Tableau 18-3 Vue de l'historique 



URL Popstate et event.state 


http://www.mondomaine.com/html5/index.html 


null 


http://www.mondomaine.com/html5/Raisin.html 


{ affichage : "#raisin" } 


http://www.blup.fr/ 





Cas pratique 

Prenons le cas relativement courant d'une page dont le contenu est structure par des 
onglets, autour de liens <a>. Avec l'aide de JavaScript, ceux-ci masquent ou affichent 
plusieurs elements <article> qui leur sont lies, pour n'en garder qu'un seul visible. 
Quatre liens, quatre articles, quatre etapes de navigation. 



Figure 18-4 

Etape 1 



U HTML5 : Hislorique 
^ J^J | C? | it | Q http://www.mondomaine.ci 




La pomme est le fruit du pommier, arbre fruitier 
largement cultive. L'arboriculture fruitiere est 
une branche de l'arboriculture specialisee 
dans la culture des arbres fruitiers afin d'en 
recolter les fruits ou les faux-fruits com me la 
pomme du pommier domestique. 
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En temps normal, si l'utilisateur rafraichit la page ou y revient avec le bouton 
« precedent » de son navigateur, il retrouvera l'etat initial (le premier onglet). Car 
JavaScript sera bien incapable de determiner quel etait l'etat de la page lorsqu'elle a 
ete quittee. Le navigateur sera egalement incapable de passer d'un onglet a l'autre si 
l'utilisateur navigue dans son historique en avant ou en arriere. Meme apres avoir 
clique une dizaine de fois sur les liens, l'adresse du document restera toujours la 
meme et il lui suffira d'un seul bond en arriere dans l'historique pour revenir a un 
document qui n'aura probablement rien a voir avec le « precedent onglet vu ». 

Le script qui equipe cet exemple complet remedie a cette problematique en utilisant 
l'API History. 

Les styles CSS sont deportes dans un fichier externe permettant de definir la dispo- 
sition des liens de navigation, les couleurs et les fonds. 

Gestion avancee de l'historique (index.html) 

<!doctype html> 
<html lang="fr"> 
<head> 

<title>HTML5 : Historique</title> 

<meta charset="utf-8"> 

<link rel="stylesheet" href="styles.css"> 

</head> 

<body> 

<div class="wrap"> 

<ul id="liens"> 

<lixa href="#pomme">Pomme</ax/l i> 

<lixa href="#raisin">Raisin</ax/l i> 

<1 ixa href="#kiwi ">Kiwi</ax/l i> 

<1 i xa href ="#banane">Banane</ax/l i > 
</ul> 

<div id="contenu"> 

<article id="pomme"> 
<img src="pomme. jpg" alt="Une pomme"> 

<p>La pomme est le fruit du pommier, arbre fruitier largement cultive. 
L'arboriculture fruitiere est une branche de 1 'arboriculture specialisee dans la 
culture des arbres fruitiers afin d'en recolter les fruits ou les faux-fruits 
comme la pomme du pommier domestique.</p> 
</article> 

<article id="raisin"> 
<img src="raisin. jpg" alt="Du raisin"> 
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<p>Le raisin est le fruit de vignes du genre Vitis. II se presente sous la 
forme de grappes composees de nombreux grains, qui sont sur le plan botanique 
des baies, de petite taille et de couleur claire, pour le raisin blanc ou plus 
foncee, pour le raisin rouge. </p> 
</article> 

orticle id="kiwi"> 
<img src="kiwi . jpg" alt="Un kiwi"> 

<p>Les kiwis sont des fruits de plusieurs especes de lianes du genre 
Actinidia, famille des Actinidiaceae. lis sont originaires de Chine, notamment 
de la province de Shaanxi . On en trouve par ailleurs dans des climats dits 
montagnards tropicaux.</p> 
</article> 

orticle id="banane"> 
<img src="banane. jpg" alt="Une banane"> 

<p>La banane est le fruit, ou baie derivant de 1 'inflorescence du bananier. 
Les bananes constituent un element essentiel du regime alimentaire de certains 
pays developpes et constituent une nourriture de base pour des millions de 
personnes sous les tropiques.</p> 
</article> 

</di v> 

<hr /> 

<p id="messages"x/p> 
<px/p> 

</div> <!-- .wrap --> 
<script> 

window. onload = function() { 

// Fonction gerant l'affichage et le 
// masquage des differentes vues Q 
function affiche(identifiant) { 

var articles = document. querySel ectorAl 1 ("#contenu article"); 

// Valeur par defaut si aucun identifiant 

if (identifiant==null) identifiant = "#"+arti cles [0] .getAttribute("id") ; 

document. getElementById("messages") .innerHTML += "On affiche 
<i >"+i denti f i ant+"</i ><br>" ; 
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// Application de la vue active 
for(j=0;j<articles. length; { 

if ("#"+articles[j] .getAttribute("id")==identifiant) { 
articles[j] . style. display=' block' ; 

} else { 

articles[j] .style.display='none' ; 

} 

} 

// Application de la classe active au lien 
for(j=0; j<liens.length;j++) liens [j] .className=' ' ; 
document . querySel ector ( ' #1 i ens 
a[href=" '+identifiant+'"] ' ) . className=' actif ; 



// Detection de la presence de 1 'API 

if (typeof hi story. pushState !== "undefined") { 

var liens = document. querySel ectorAl 1 ("#li ens a"); 

// Pour tous les liens 
f or (i=0 ; i <1 i ens . 1 ength ; i ++) { 

// Creation d'un gestionnaire d'evenement click 
liens[i] . addEventListenerC click' ,function(event) { 

// Appel de la fonction d'affichage 
// avec pour parametre le hash du lien 
affi che (event . target. hash) ; 

// Creation de l'objet d'etat 

var etat = {affichage: event. target. hash}; 

// Insertion dans 1 'historique 

hi story . pushState(etat , event . target . text , event . target . text+" . html ") ; 
event. preventDefault() ; 

}, false); 

} 

// Classe par defaut au chargement sur le premier lien 
liens[0] .className='actif ' ; 

// Gestionnaire d'evenement popstate 
window. onpopstate = function (event) { 

document. getElementById("messages") .innerHTML += "<span>Evenement popstate 
!</spanxbrxi>event.state</i> = "+event.state+"<br>"; 
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/I Si un objet d'etat est present 
if (event. state !=null) { 

document . getEl ementById("messages") . i nnerHTML += 
"<i >event . state . af f i chage</i > = "+event . state . af f i chage+"<br>" ; 

// Appel de la fonction d'affichage Qj) 

// avec pour parametre 1 'identifiant memorise 

af f i che (event . state . af f i chage) ; 

} else { 

// Appel de la fonction d'affichage sans etat 
affi che (null) ; 

} 

} 

} else { 

alert("Ce navigateur ne supporte pas la gestion avancee de 1 'historique") ; 

} 

}; 

</script> 

</body> 
</html> 

En premier lieu Q, une fonction basculant l'affichage entre les differentes vues est 
declaree. Elle accepte en parametre l'identifiant d'un article pour l'afficher tout en 
masquant ses freres. C'est elle aussi qui attribue Q la classe acti f a l'onglet courant. 

Apres la detection de la presence de l'API History, une boucle © se charge de rede- 
finir les evenements cl i ck pour les liens des onglets. L'action par defaut est d'appeler 
la precedente fonction d'affichage avec pour parametre l'identifiant lu dans la pro- 
priete hash du lien, que Ton retrouve dans le membre target de I'evenement. 

Vient ensuite l'etape proprement dite de la modification de l'historique. Un objet d'etat est 
cree pour stocker une information importante : le hash lui-meme afin de savoir quelle 
vue (quel article) a ete demandee. Cet objet peut tout a fait contenir n'importe quelle 
donnee structuree, l'important est de savoir comment sen servir lorsqu'il est retrouve. 

Le tout est « pousse » dans l'historique Q avec la fonction pushState(). L'objet en 
premier argument, le titre de la vue en deuxieme, et le « lien virtuel » y correspondant 
en troisieme. De la sorte, des clics successifs sur les onglets provoquent l'apparition 
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de trois entrees supplementaires dans l'historique, et surtout l'affichage dans la barre 
d'adresses de ce troisieme argument. L'etat final (onglet Banane) correspond done a 
l'adresse Banane.html. 



Figure 18-5 

Etape 2 




La banane est le fruit, ou baie derivant de 
I'inflorescence du bananier. Les bananes 
constituent un element essentiel du regime 
alimentaire de certains pays developpes et 
constituent une nourriture de base pour des 
millions de personnes sous les tropiques. 



On affiche 8raism 
On affiche fflivA 
On afficfie ffljanane 



httpy/www, mondomaine.com/hi5tory/R3isin "tm 



Le navigateur offre la possibilite de faire un petit bond vers l'une des entrees de l'his- 
torique. A cela va etre liee l'apparition d'un evenement popstate. Etant donne qu'il 
est intercepte par son propre gestionnaire d'evenement, et que cet evenement con- 
tient dans sa propriete state une copie de l'objet d'etat cree a l'etape precedente, le 
script sait a present quel est le contexte a retrouver. 

Si l'objet existe (n'est pas null), sa propriete affichage est lue et envoyee a la 
fonction gerant la dynamique des onglets et des articles ©. Par ailleurs, le navigateur 
retrouve automatiquement dans son journal l'adresse « virtuelle » qui lui avait ete 
indiquee par pushState() et l'affiche a nouveau. 
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Le raisin est le fruit de vignes du genre Vitis. II 
se presents sous la forme de grappes 
composees de nombreux grains, qui sont sur 
le plan botanique des baies, de petite taille et 
de couleur claire. pour le raisin blanc ou plus 
foncee, pour le raisin rouge. 



On affiche ftraisin 
On afficjie ftkiwi 
On aifiche Itbanane 

eventstate - [object Object] 
eventsfais.affichage - #rajsin 
On affiche ffraisin 

Cette organisation nest pas la seule solution technique possible, il en existe bien 
d'autres selon l'agencement des liens et des contenus a manipuler. Dans le cas present 
et par souci de simplicite, les liens entre onglets, identifiants des balises <arti cl e> et 
adresses se font via la lecture d'attributs ou de l'intitule texte des liens. Les differentes 
vues pourraient tout aussi bien correspondre a des donnees chargees a l'aide d'Ajax, 
et non simplement masquees en CSS des le chargement. 

Les fonctions complementaires d'affichage des messages en bas de page facilitent la 
comprehension des etapes et de l'etat de l'objet recu par popstate. 



Reecriture d'adresse 

En bonus cache, pour convaincre le serveurweb de renvoyer un contenu pertinent (la 
page index. html) plutot qu'une erreur 404 si I'utilisateur accede directement a l'une 
des adresses qui n' existe pas physiquement dans l'arborescence des fichiers, il faut 
utiliser la reecriture d'URL. 

Avec le serveur web Apache, un fichier .htaccess place dans le repertoire heber- 
geant les fichiers sera suffisant. 
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Exemple de reecriture minimale (.htaccess) 

IRewriteEngine on 
RewriteRule A(.*)\.html index.html [L] 

Celui-ci signifie simplement que pour toute requete faisant appel a un fichier se ter- 
minant par l'extension .html sera inevitablement renvoye le fichier i ndex. html . 



ancres et I'evenement hashchange 

Dans le fond, ce comportement est semblable a ce que Ton peut « simuler » a l'aide 
des ancres (on utilise aussi le terme hash en version originale, mais cela n'a rien a voir 
avec une quelconque substance illicite). Ces chaines de texte ajoutees a la fin de 
FURL courante, prefixees par le caractere diese #, correspondent generalement a une 
ancre nommee dans le code HTML : <a name="monancre">. En JavaScript, cette 
action serait traduisible par window. location = "#monancre", qui cree egalement 
une entree dans l'historique avec le document actif. 

Un evenement hashchange est declenche lorsque cette ancre se voit modifiee dans 
l'adresse courante. La lecture de la chaine de texte representant l'ancre (c'est-a-dire le 
hash) se fait alors grace a la propriete wi ndow . 1 ocati on . hash. 

Detection de la modification du hash 

<scri pt> 

wi ndow.onhashchange = function() { 

al ert("L ' ancre a ete modifiee : "+location. hash) ; 

} 

</scri pt> 

Cet evenement est supporte a partir d'Internet Explorer 8, Firefox 3.6, et Chrome 5. 
Cependant, on remarque plusieurs avantages a l'utilisation de pushStateO : 

• II n'est pas necessaire de modifier FURL ; tandis que 
window. location="#monancre" ; ne cree une entree dans l'historique que si 
l'ancre actuelle est differente de #monancre. 

• Des donnees peuvent etre associees a l'aide de Fobjet d'etat permettant de stocker 
Finformation necessaire au traitement ; tandis que l'ancre ne peut contenir qu'une 
courte chaine de texte. 

• L'adresse choisie peut etre radicalement differente sans devoir provoquer un 
rechargement de page, avec toutefois la condition de respecter Forigine du 
document ; tandis que window. location provoque un changement de page si la 
modification affecte autre chose que l'ancre. 
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• Levenement hashchange n'est pas declenche par pushStateO meme si l'ancre (le 
hash) change. 



Detection 

La detection des possibilites de modification de l'historique permet de s'assurer que 
le visiteur pourra beneficier de cette fonctionnalite avancee. 

II convient de proposer une alternative dans la negative, soit en conservant le com- 
portement naturel des liens, soit en utilisant d'autres fonctions JavaScript pour conti- 
nuer la navigation. 

Avec les fonctions natives 

if (typeof hi story . pushState !== "undefined") { 

// La gestion avancee de l'historique est disponible 
} else { 

// La gestion avancee de l'historique est absente 
} 



Prise en charge 



Tableau 18-4 Tableau de prise en charge de History et Location 



Navigateur Version 


Mozilla Firefox 


4+ 


Apple Safari 


5+ 


Google Chrome 


5+ 


Opera 


11.5+ 



Navigateur 



Version 



iOS, Opera Mini 




Android 


2.2+ 


Opera Mobile 


11.1 + 


Internet Explorer 





Une librairie nommee sobrement hi story . j s vient epauler l'API History. Elle vise a 
offrir un support unifie sur tous les navigateurs, et une solution de repli pour ceux qui 
seraient encore restes a Fere HTML 4 avec une alternative construite autour du hash. 
Au depart basee sur jQuery, elle fait desormais l'oeil doux a MooTools et Prototype. 



RESSOURCE Librairie History.js 

► https://github.com/balupton/history.js 
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de fond : les Web Workers 

Travailleurs, travailleuses ! JavaScript s'emancipe et peut s'executer 
en multithread et en tache de fond. 




Figure 19-1 Au boulot ! 
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JavaScript est mis a contribution de facon croissante dans la creation d'applications 
web. C'est le moteur de toutes les interactions avec l'utilisateur et les pages HTML, 
voire avec le reseau. La plupart du temps, ce langage est mis a contribution au travers 
de fichiers de scripts simples qui effectuent un traitement a duree limitee, puis qui 
rendent la main a l'utilisateur de l'application a Tissue des operations. 

Les progres accomplis par les moteurs dans les performances d'interpretation sont 
considerables et mis en avant par les editeurs de navigateurs. Cela ne suffit nean- 
moins pas a resoudre un probleme conceptuel : il existe historiquement un goulot 
d'etranglement dans cette interpretation classique cote client. JavaScript evolue dans 
un environnement monotache (a un seul thread), ce qui signifie que plusieurs scripts 
ne peuvent etre executes au meme moment. Cette limitation est incongrue alors que 
les processeurs sont maintenant multicceurs. 

Or, les applications necessitent desormais une gestion multiple des evenements de 
l'interface utilisateur, des traitements de fichiers ou reseau, des manipulations du 
DOM ou des elements medias (images, canvas, audio, video). Tout cela ne peut alors 
etre pris en compte simultanement. On peut bien entendu recourir a des astuces pour 
« faire semblant » de donner la main alternativement a chaque besoin (grace a 
setTimeout, setlnterval, XMLHttpRequest, les evenements DOM, etc.), mais dans 
le fond, on est bien loin du multitache (a threads multiples) et un blocage peut sur- 
venir, paralysant l'affichage. La plupart du temps, le navigateur - moderne - pre- 
viendra l'utilisateur et lui suggerera d'arreter le deroulement du script qui consomme 
toutes les ressources et bloque l'interface. 



Figure 19-2 

Un message d'avertissement 
affiche par Mozilla Firefox 



***************** 



Un script sur cette page est peut-etre occupe ou ne repond plus. Vous pouvez arreter le script 
maintenantj I'ouwir dans le debogueur ou le laisser continuer. 

Script : test.html: 17 
I I Ne plus demander 

| Arreter le script ] | Deboguer le script J | Continuer ] 



j Attention : le script ne repond pas 



Figure 19-3 

Un message d'avertissement 
affiche par Google Chrome 



Un script sur cette page est peut-etre occupe ou ne repond plus. Vous pouvez arreter le script 
maintenantj I'ouwir dans le debogueur ou le laisser continuer. 



Script : test.html: 17 
I I Ne plus demander 

Arreter le script I Deboguer le script Continuer 



Heureusement, HTML 5 propose une solution avec les Web Workers. 
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Principe 

Les Web Workers sont un moyen d'execution de code JavaScript en tache de fond, non 
bloquante pour l'execution normale du navigateur et son interface utilisateur. En somme, 
il est possible d 'interagir avec la page HTML tout en effectuant une serie d'operations 
(souvent un calcul intensif ) definies dans un ou plusieurs fichiers JavaScript externes. 

Chaque Worker s'execute dans un thread separe. II existe de facon independante par 
rapport a la page qui Fa cree et ne peut acceder a son DOM directement, pour mani- 
puler son contenu ou sa structure. Chaque communication doit etre entreprise par 
des fonctions de callback qui traitent l'envoi et la reception de messages texte (voir le 
chapitre 13 sur les echanges interdocuments ou web messaging). On peut egalementy 
implementer de l'Ajax en utilisant l'objet XMLHttpRequest. 

Figure 19-4 

Dialogue entre page et 
travailleur 



Ce nouvel usage modifie la vision que Ton avait jusqu'a present de ce langage. 

• JavaScript etait execute dans un processus seul (ou plutot un seul thread), ce qui ne 
permettait absolument pas de detacher son execution du cours normal d'interpreta- 
tion de la page et dont la fin etait attendue par le navigateur. Un thread distinct per- 
met une interpretation parallele plus performante, notamment dans les processeurs 
multicceurs, pour peu que le navigateur et le systeme d'exploitation l'autorisent. 

• JavaScript n' etait que peu puissant. Les dernieres avancees accomplies durant la 
bataille de 1'optimisation des navigateurs ont permis d'en redorer le blason. 

On considere generalement que les Web Workers sont charges d'un traitement assez lourd 
et ne sont pas destines a etre utilises de facon massive pour un usage courant de JavaScript, 
lis peuvent avoir une duree d'execution consequente, compte tenu d'un cout eleve pour la 
memoire et le processeur. Les usages de predilection sont la mise en forme de longs textes, 
la synthese ou la retouche d 'image, les operations sur de grandes quantites de donnees. 



Ressource Specification des Web Workers 

Web Workers en cours de developpement cote W3C 
* http://dev.w3.org/html5/workers/ 
Web Workers en tant que standards W3C 

► http://www.w3.org/TR/workers/ 
Web Workers par le WhatWG 

► http://www.whatwg.org/specs/web-apps/current-work/complete/workers.html 
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Fonctionnement 

Initialisation 

Le constructeur eponyme WorkerO permet d'instancier 1' execution d'un tel script 
dans un thread et de retourner un objet de type Worker pour le piloter. Celui-ci prend 
en parametre le nom du fichier a charger et contenant le code JavaScript. 

var travailleur = new WorkerC 'worker . js') ; 
On peut aisement detecter la presence de cette API au prealable. 

Detection du support Web Workers 

"if (! Iwindow. Worker) { 

// Ce navigateur supporte la creation de Workers 

} 

// Alternative 

if (! ('Worker' in window)) { 

// Ce navigateur ne supporte pas la creation de Workers 
} 

Attention, certains navigateurs peuvent choisir de ne pas executer de fichiers locaux (posse- 
dant une adresse en f i 1 e : //) et d'ignorer silencieusement l'appel a un Worker. C'est le cas 
de Google Chrome qui necessite d'etre demarre avec le parametre --al 1 ow-f i 1 e-access- 
f rom-f i 1 es pour les tests menes de la sorte. Par ailleurs, un script ne peut etre demarre s'il 
ne possede pas la meme methode d'acces que la page appelante, par exemple depuis une 
URL data : ou j avascri pt : ou encore https : depuis une page accedee en http : . 

Exemple de page note invoquant un Web Worker 

<!doctype html> 

<html> 

<head> 

<ti tl e>Travai 11 eurs , travai 1 1 euses . . .</title> 
</head> 
<body> 

<p i d=resul tatx/p> 
</body> 
<scri pt> 

var travailleur = new WorkerC 'worker ■ js') ; 

</script> 
</html> 

II est un point sur lequel il n'est pas inutile d'insister : tout fichier JavaScript peut etre 
utilise dans cette situation. Prenons un exemple minimaliste. 
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Travailleur du dimanche 

function hopO { 

postMessage("Stayin'alive") ; 

} 

setlnterval (hop, 1000) ; 

Ce script de quatre lignes - a l'interet certes limite - provoque uniquement l'envoi 
d'un message a la page parent toutes les secondes. 

L'exemple utile le plus parlant est celui de la quete de nombres premiers, avec un algo- 
rithme qui peut se derouler sans fin. On incremente un compteur dans une boucle whi 1 e 
et Ton recherche sa capacite a etre divisee par un autre nombre grace au modulo (signe % en 
JavaScript). (N'hesitez pas a vous exercer d'une autre facon avec la suite de Fibonacci.) 

Exemple de Worker a la recherche de nombres premiers (worker.js) 

// On debute a parti r de 1 
var n = 1; 

// Boucle de calcul incremental 
recherche: while(true) { 
n += 1; 

for (var i =2; i <= Math . sqrt(n) ; i += 1) 

// Si le nombre n'est pas premier, on continue la recherche 
if (n % i == 0) continue recherche; 

// Sinon, un nombre premier est trouve 

// et se voit communique a la page 

postMessage(n) ; 

} 

L'ideal est bien entendu de confier une telle tache a un travailleur, mais aussi de recueillir 
un resultat. Dans le cas present : les nombres premiers successivement trouves. 

Communication 

Le Worker et la page appelante peuvent etre assimiles a deux entites pouvant dialo- 
guer par messages interposes, a l'aide de la fonction postMessageO pour l'envoi, et 
de l'evenement onmessage pour la reception. 

Lorsque la page parent envoie un signal avec postMessageO, le valeureux travailleur 
se voit recevoir un evenement onmessage contenant dans ses proprietes la teneur du 
mot doux envoye. Inversement, lorsque le travailleur envoie un message avec 
postMessageO, c'est la page parent qui le receptionne grace a une interception de 
l'evenement onmessage. 

Par defaut, ces messages sont de type texte, mais les implementations les plus 
recentes autorisent d'autres types de donnees, entre autres des objets qui sont con- 
vertis automatiquement au format JSON (JavaScript Object Notation) pour le transit. 
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II suffit done d'adjoindre un gestionnaire d'evenement pour traiter les messages 
entrants en provenance du code execute. On choisit alors de les afficher dans le corps 
de la page au sein de l'element portant l'identifiant resultat, cible par la fonction 
getEl ementByldO, et dont on modifie la propriete textContent. 

// Reception d'un message en provenance du Worker 
travailleur.onmessage = function (event) { 

document . getEl ementByldC ' resul tat '). i nnerHTML = event. data; 

}; 

L'objet recu en argument du gestionnaire d'evenement (ici event) recueille les diffe- 
rentes informations relatives au message, notamment avec la propriete data qui con- 
tient simplement le texte de ce message. 

Inversement, si Ton souhaite envoyer un message au travailleur, un appel a la 
methode postMessageO du Worker declenche cet evenement. 

I // Emission d'un message a destination du Worker 
travailleur. postMessage('Hello! ') ; 

II faudra alors completer le code initial pour receptionner ce message. Dans le cadre 
du calcul sans fin des nombres premiers, cela peut permettre de le placer en pause ou 
de l'arreter totalement. 

Exemple de Worker avec reception de messages 

// Cette variable definit l'etat du travailleur 
var en_calcul = false; 

// Gestionnaire d'evenement pour la reception 
onmessage = function (event) { 

if(en_calcul == false && event . data=="go") { 

en_calcul = true; 

cal cul O ; 

} else if (en_calcul==true && event . data=="pause") { 

en_calcul = false; 
} else if (en_calcul==true && event . data=="stop") { 

en_calcul = false; 
cl ose() ; 

} 

}; 

// Nombre 
var n = 1; 

// Fonction de calcul 
function calcul () { 
recherche: while(en_calcul) { 
n += 1; 



582 



19 - JavaScript en (multi)tache de fond : les Web Workers 



for (var i =2; i <= Math . sqrt(n) ; i += 1) 
if (n % i == 0) continue recherche; 
// Envoi du resultat 
postMessage(n) ; 

} 

} 

De la sorte, on declenche le calcul par l'envoi d'un message contenant "go" depuis la 
page hebergeant le Worker. 

travai 11 eur . postMessage("go") ; 

La pause est suscitee par le message du meme nom. 

travai 11 eur . postMessage(" pause") ; 

Le calcul prend fin lorsque la variable en_calcul change d'etat a l'envoi d'un mes- 
sage "stop" qui declenche la methode close(). 

travai 11 eur . postMessage("stop") ; 

Terminaison 

Un Worker peut mettre fin lui-meme a son existence grace a la methode close(). 
Fin a I'interieur du code du Worker 
| closeO; 

Stopper l'execution d'un Worker depuis la page hote est possible. Cela ne lui laisse 
en revanche pas la possibilite d'achever son traitement : la methode terminateO est 
prevue, mais revet un caractere plus radical. 

Fin depuis le document hote 

travailleur. terminateO ; 

Gestion des erreurs 

A l'instar de la reception des messages, l'objet Worker peut egalement recueillir un 
evenement correspondant a une erreur d'execution, via la propriete onerror. 

travai 11 eur .onerror = function(event) { 

alert("Erreur ligne : 
"+event . 1 i neno+"\nFi chi er : "+event . f i 1 ename+"\nMessage : 
"+event . message) ; 

}; 
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Cet evenement contient des proprietes renseignant sur l'erreur : 

• message : un message d'erreur texte lisible par un humain ; 

• f i 1 ename : le nom du fichier dans lequel l'erreur est survenue ; 

• 1 i neno : le numero de la ligne du script a laquelle l'erreur est survenue. 

Contexte 

Dans les exemples precedents, le gestionnaire pour l'evenement message est declare 
d'une facon simplifiee par rapport au contexte du Web Worker : 

onmessage = function(event) { 

Les references self et this se rapportent au contexte global du Web Worker, c'est 
pourquoi il serait aussi possible d'ecrire : 

this . onmessage = function(event) { 

Pour etre totalement perfectionniste, JavaScript prevoit l'emploi de la fonction 
addEventLi stener pour associer une fonction (anonyme ou nommee) a un evene- 
ment et removeEventLi stener pour les dissocier : 

// Declaration de la fonction 

function recepti onMessage(mon_message) { 

// Traitement du message... 

} 

// Ajout d'un ecouteur sur l'evenement message 
addEventLi stener (' message ' , receptionMessage, false); 

Cette fonction n'est pas supportee par Internet Explorer avant sa version 9. II faut 
alors exploiter attachEventO en complement. 

De par la nature du multitache, les Workers n'ont - pour le moment - pas acces au 
DOM, et aux objets window, document ou parent. Par consequent, Faeces a Web 
Storage n'est pas autorise. 

lis peuvent en revanche exploiter navigator, location (en lecture seule), 
XMLHttpRequest, les objets JavaScript, le cache d'application, la creation d'autres 
Workers et les fonctions ci-apres. 

Fonctions complementaires 

Etant donne que Ton se trouve dans le cadre d'une execution classique de JavaScript, 
il peut etre utile d'exploiter des concepts de base pour la piloter, au sein du travailleur 
lui-meme, grace aux fonctions : 
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• setTimeout(fof7ct7'on, delai~) : declenche une fonction apres un delai exprime 
en millisecondes, et renvoie un identifiant unique. 

• clearTimeout(7'c/e/it7f7'aA7t) : supprime la programmation de l'execution prece- 
dente grace a l'identifiant unique. 

• setInterval(foA7ct7'o/i, delai) : declenche une fonction a intervalles reguliers, 
exprimes en millisecondes, et renvoie un identifiant unique. 

• clearlnterval (.identifiant) : annule les executions precedentes grace a l'iden- 
tifiant unique. 

Entre autres, cela permet de declencher periodiquement des operations au lieu de 
recourir a une execution permanente. 

Un Worker peut en invoquer d'autres s'il le desire, dont l'origine doit etre toujours la 
meme que la page parent. Le chemin indique est relatif a celui du parent et non de la 
page, ce qui facilite l'orientation dans l'arborescence des fichiers. Attention toutefois 
a la complexite d'une telle recursivite : si les Workers pullulent, la memoire recule. 

D'une facon plus pragmatique, un Worker peut charger le code d'un ou plusieurs 
fichiers JavaScript, par exemple des librairies, pour y avoir acces dans son propre 
espace d'execution : importScri pts() prend en argument(s) le nom de ce(s) 
fichier(s) a charger. 

Chargement de fichiers JavaScript complementaires 

// Un fichier 

importScri pts("~librai rie. js") ; 
// Plusieurs fichiers 

i mportScri pts("l i brai riel. js" , "J i brai ri e2 . js" , "1 i brai rie3.js"); 

Lorsque plusieurs fichiers doivent etre inclus de la sorte, la fonction peut les charger 
dans n'importe quel ordre, mais les executera dans l'ordre d'appel, et ne retournera 
pas avant leur execution complete. 

En combinaison avec les possibilites offertes par Offline Web Applications, les Web 
Workers ont gagne les evenements onl i ne et of f 1 i ne pour profiter de cette API. 

Blob a la rescousse 

Le constructeur WorkerO suppose par defaut que le code JavaScript a interpreter est 
situe dans un fichier externe a la page d'origine. II est neanmoins possible par une 
astuce de generer des instructions a la volee sans avoir a creer de fichier independant. 
Linterface BlobBuilder permet cela par l'usage d'une URL de transition faisant refe- 
rence a la chaine de texte. 
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// Creation d'un objet Blob 
var blob = new Bl obBui 1 der() ; 

// Ajout de la chaine contenant le code 

blob.append("onmessage = function(event) { postMessageC Echo !'); }"); 

// Generation d'une URL faisant reference au Blob 
var urlBlob = window. createObjectURL(bl ob . getBlobO) ; 

// Creation du Worker 
var wkBlob = new Worker(urlBlob) ; 
wkBl ob . onmessage = function(event) { 
// Reception d'un message 

}; 



Prise en charge 

Tableau 19-1 Tableau de prise en charge de I'API Web Workers par navigateur 



Navigateur Version 


Mozilla Firefox 


3.5+ 


Apple Safari 


4.0+ 


Google Chrome 


4.0+ (<4.0 avec Gears) 


Opera 


10.6+ 


Android 


2.1 



Navigateur Version 


Opera Mobile 


11 + 


Internet Explorer 


10+ 


iOS 




Opera Mini 





Rappel 

Consultez le site d'accompagnement du livre pour plus des informations de compatibility mises a jour. 

L'API Google Gears pour les navigateurs plus anciens accepte la notion de Worker- 
Pool qui se comporte globalement de la meme facon, mais avec une nomenclature 
differente. 



Ressource En savoir plus sur les Web Workers 

WorkerPool API avec Google Gears (developpement arrete) 

► http://code.google.com/intl/fr/apis/gears/api_workerpool.html 
Une fausse implementation a I'aide d'eval () et setTimeoutO 

► http://code.google.eom/p/fakeworker-js/ 
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Figure 20-1 Outils de base 
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Le ~DOWL(Document Object Model) est une interface de programmation pour tous les 
documents et pages web HTML ou XML. II s'agit d'une structure representant ces 
documents tels qu'ils ont ete interpreted en memoire, permettant de parcourir et modi- 
fier leur contenu, ainsi que leur presentation visuelle si des regies CSS sont appliquees. 

Le W3C a developpe ce standard progressivement sur trois niveaux en tant qu'inter- 
face neutre vis-a-vis de la plate-forme et du langage, laissant le libre choix aux edi- 
teurs de navigateurs de l'implementer a leur facon : 

• Niveau 1 (1998) : Le noyau, les modeles pour les documents HTML etXML, la 
navigation et la manipulation de document. 

• Niveau 2 (2000) : Le modele objet pour la feuille de style, l'espace de noms 
XML, le modele des evenements et le parcours du document, la fameuse fonction 
getEl ementByldO. 

• Niveau 3 (2004) : Ajout du support XPath, evenements clavier et interface de 
serialisation des documents en XML. 

Au chargement d'un document HTML, un arbre de la page est elabore via le DOM. 
Chacun des elements est considere comme un objet et peut jouer le role de noeud, 
auquel on peut attacher les qualites de parent, enfant, orphelin ou frere. Cette repre- 
sentation permet d'acceder aux proprietes de chacun de ces objets ou groupes 
d'objets et aux methodes qui les equipent. 



Figure 20-2 

Arborescence DOM 




<img> 



chl> 



<p> 
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Ressources Specifications relatives au DOM 

DOM 

► http://www.w3.org/DOM/ 
Publications autour du DOM 

► http://www.w3.org/D0M/Activity 
FAQ 

► http://www.w3.org/D0M/faq.html 
API Selectors 

► http://www.w3.org/TR/selectors-api/ 



Les bases de JavaScript 

Dans l'immense majorite des cas, on utilise JavaScript dans une page web pour manipuler le 
DOM. On a durant un temps parle par abus de langage de DHTML ou « Dynamic 
HTML » pour designer cette conjonction sans reellement savoir ce qui se cachait derriere les 
instructions envoyees au document. Les operations les plus courantes sont l'ajout, la modifica- 
tion et la suppression de noeuds, ce qui se traduit dans le navigateur par une alteration du 
rendu visuel (ou auditif) et une mise a jour du modele present en memoire. Ce chapitre pre- 
sente brievement un ensemble de fonctions utiles en combinaison avec HTML 5 et ses API. 

Variables 

JavaScript est un langage puissant mais souple. Relativement permissif, il comprend 
de nombreuses structures de programmation que Ton retrouve dans les langages les 
plus celebres : variables, fonctions, boucles, types, generateurs, iterateurs, fonctions 
mathematiques, manipulations de chaines et tableaux, etc. 

Avec HTML, on retrouve generalement les declarations de script dans une balise 
<scri pt>. 

<scri pt> 

alert ("JavaScript c'est surpuissant !"); 
</scri pt> 

Toute instruction est separee de la suivante par un point-virgule. 

Une variable est declaree avec le mot-cle var, eventuellement suivie d'une affectation 
de valeur grace au signe egal « = ». 

var a = 3; 
var b = 4; 
var c; 
a1ert(a*b) ; 
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Cet extrait de code affiche dans une boite de dialogue le resultat de la multiplication 
des deux variables a et b (en ignorant superbement c). 

Pour profiter au mieux de la decouverte de JavaScript, et surtout de meilleures conditions 
de developpement et debogage, utilisez un navigateur moderne equipe d'une console 
JavaScript et preferez la fonction console. log(). Celle-ci produira un resultat plus 
lisible et non bloquant. Referez-vous a l'introduction « Consoles JavaScript pour les API 
HTML 5 » du chapitre 2 pour savoir ou trouver la console de chaque navigateur. 

var a = 3; 
var b = 4; 
console. log(a*b) ; 



Types simples 

Nous avons vu tres rapidement comment declarer deux variables et leur affecter une 
valeur initiale. Des chaines de texte peuvent aussi etre declarees : 

var oeuvre = "Un moine au bord de la mer"; 

... et concatenees grace au signe « + ». 
console. log(oeuvre+" a ete peint par Caspar David Fri edri ch") ; 

Des tableaux de donnees sont initialises en un clin d'ceil : 

var tableau = ArrayC'Saint Matthieu et l'Ange","Les Mangeurs de pommes 
de terre","Les Trois Graces"); 

Chaque element de tableau est accessible par son index place entre crochets « [ ] ». 

console. log(tableau[0]) ; // Affiche "Saint Matthieu et 1 'Ange" 
console. log(tableau[2]) ; // Affiche "Les Trois Graces" 



Rappelons que I'index debute toujours a zero en programmation. 



La longueur d'une chaine de texte ou d'un tableau peut etre connue grace a sa pro- 
priete length. 

oeuvre . 1 ength ; // 26 
tabl eau . 1 ength ; // 3 
tableau [2] .length; // 16 
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Objets 

Les objets sont tres souples pour memoriser des donnees un peu plus complexes. lis 
sont crees avec des paires de cles/valeurs, separees par des virgules, le tout regroupe 
entre accolades « { } » : 

var voiture = { 
roues: 4, 

couleur : "rouge", 
achat : { 

pn'x : 20000, 
annee : 2011 

} 

}; 

Un objet peut contenir un sous-objet, et ainsi de suite. Ici, l'objet voiture contient 
trois proprietes (roues, couleur, achat) dont la derniere est egalement un objet a deux 
proprietes (prix, annee). 

Les proprietes des objets sont accessibles en « naviguant » dans l'arborescence de 
l'objet par des points « . ». 

voiture. achat. annee; // Renvoi e 2011 

Un appel a console.log permet dans la plupart des cas d'obtenir une visualisation de 
la variable objet sous forme d'arbre. 

consol e . 1 og(voi ture) ; 



Figure 20-3 

Affichage d'un objet dans la 
console de Chrome 



> voiture .achat .annee 
2011 

> console .log( voiture) ; 
T Object 

► achat : Object 
couleur: "rouge' r 
roues: 4 

► prot o : Object 



Certains objets sont tres celebres dans un navigateur, ils servent d'interface a un 
ensemble d'informations reunies au chargement du document. Parmi eux, window 
qui « symbolise » la fenetre active. 

window; // interface DOMWindow 
window. document; // interface Document 
window. navigator; // interface Navigator 
window. navigator. userAgent; // de type String 
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En programmation orientee objet, l'objet lui-meme est une instance de classe. Cela 
revient a dire que la classe est le modele de l'objet, que Ton ne peut utiliser directe- 
ment avant de faire appel au constructeur. 

var o = new ObjectO; 

Quelques API Web sont basees sur ce principe. C'est ici que le mot cle new inter- 
vient, suivi de l'appel au constructeur (le nom de la classe de l'objet). 

var w = new WorkerO; 

Pour etre encore plus precis, il s'agit la d'un objet implementant l'interface Worker. 

En realite, tout est objet en JavaScript, avec l'exception de nul 1 et undefi ned qui cor- 
respondent respectivement a une valeur nulle (mais differente de 0), et une valeur 
indefinie. 

var s = new Stri ng(" rose") ; 

s . toStri ng() ; // Renvoie "rose" 

s . nexi stepas ; // undefined 

Fonctions 

Les fonctions servent a regrouper des instructions destinees a etre invoquees une ou 
plusieurs fois. Elles sont declarees grace au mot-cle function suivi du nom de la 
fonction, et de deux parentheses « ( ) ». 

function identification_navigateur() { 
consol e . 1 og (wi ndow . navi gator . use rAgent) ; 

} 

. . . puis invoquees avec leur nom : 
identification_navigateur() ; // Affiche "TuserAgent 

Une variante : 

identification_navigateur = functionO { 
consol e . 1 og (wi ndow . navi gator . use rAgent) ; 

} 

L'execution d'une fonction peut etre modulee en lui adjoignant des parametres, men- 
tionnes entre les parentheses. 
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function add"ition(a,b) { 
console. 1og(a+b) ; 

} 

// Appel de la fonction d'addition 
addition (2, 3);// Affiche 5 

Une fonction retourne un resultat grace au mot-cle return. 

function addition(a.b) { 
return a+b; 

} 

var c = addition (2 , 3) ; 
consol e . 1 og(c) ; 

Boucles 

La fameuse boucle for permet de boucler selon un nombre defini d 'iterations. 

for (var i=0;i<10;i++) { 

console. log(i) ; // Affichera 0, puis 1, 2, 3, etc., 9 

} 

Ici, la variable i est initialisee a zero. Le bloc de code est execute tant que i est infe- 
rieur a 10. Or i est incremente de 1 a chaque iteration, ce qui provoque inevitable- 
ment l'arret et la poursuite des autres instructions lorsque i atteint 10. 

Tandis qu'une boucle whi 1 e ne perdure que lorsque la condition est encore vraie. 

var i = 0; 
while(i<10) { 

console. log(i) ; // Affichera 0, puis 1, 2, 3, etc... 9 
i++; 

} 

Avec toutes ces bases, nous avons de quoi nous pencher sur les fonctions de manipula- 
tion du DOM. Pour plonger plus en avant dans le monde merveilleux du JavaScript (il 
est vraiment merveilleux), consultez les nombreux autres ouvrages et sites a ce sujet. 



Ressources JavaScript 
JavaScript Garden 

► http://bonsaiden.github.com/JavaScript-Garden/ 
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Methodes de selection DOM 

Les fonctions ayant longtemps coexiste pour la selection de nceuds dans le DOM 
sont getElementByld et getEl ementsByTagName(depuis DOM Level 2). Leur nom 
est relativement explicite. Elles permettent de cibler un element par son identifiant, 
l'attribut id, ou par son nom. Une fois l'objet obtenu par retour de ces fonctions, on 
peut acceder en lecture ou en modification a ses proprietes (attributs, style, etc.). 

On les applique sur des interfaces, telles que l'objet document qui fait reference a la 
page web courante et qui implemente en realite l'interface Document definie dans la 
premiere version de la specification DOM. 

Cependant, malgre leur efficacite, ces fonctions se sont revelees limitees face a des 
documents dont l'arborescence devient de plus en plus complexe, et ne permet pas 
toujours de determiner les elements par leurs identifiants uniques ou par leur nom. 

II est bien possible de combiner toutes ces fonctions sur des ensembles d'elements, 
mais ce n'est pas tres pratique a mettre en place puisqu'on tend a discriminer les 
groupes de balises HTML par leurs classes ou leur parente, voire a d'autres pro- 
prietes. Lideal pour arriver a ces fins etant de se baser sur la syntaxe des selecteurs 
CSS qui decrit deja tous ces principes, pseudo-classes y compris. 

Les frameworks JavaScript, tels que jQuery, ont introduit des alternatives pour pal- 
lier ce manque et implementer directement ces algorithmes, avec pour inconvenient 
des performances moindres. 

En complement a ce succes, ont ensuite ete inaugurees nativement des fonctions 
remplissant parfaitement ce role rgetElementsByCTassName, mais aussi et surtout 
querySelector et querySel ectorAl 1 . Elles ont bien sur pour avantage d'etre inter- 
pretees directement par le navigateur, et peuvent aussi etre interrogees par les fra- 
meworks JavaScript pour gagner en performance si ceux-ci detectent leur support. 

getElementByldO 

Renvoie un element dont on specifie l'identifiant (attribut id), et nul 1 sinon. 
<hl id="titre">HTML5!</hl> 
<script> 

var element = document. getElementById("titre") ; 
alert(element.textContent) ; // Affiche "HTML 5 ! " 
</script> 
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getElementsByTagName() 

Renvoie un ensemble d'elements dont le type est specifie. 
var elements = document. getElementsByTagName("img") ; 

La variable elements obtenue est de type nodeList. Chacun de ses elements est 
accessible de deux manieres : 

elements. item(l) ; 
elements[l] ; 

II en va de meme pour les fonctions suivantes. 

getElementsByClassNameO 

Renvoie un ensemble d'elements dont on specifie la classe. 
var elements = document. getElementsByClassName("maclasse") ; 

querySelectorO <nouveau> 

Retoume le premier element qui correspond au selecteur specifie (CSS), 
var el = document. querySelector("#menu ul li .sousmenu") ; 

querySelectorAHO nouveau 

Retoume tous les elements qui correspondent au selecteur specifie (CSS), 
var titres = document. querySelectorAll ("article>hl") ; 

var lignesPaires = document. querySelectorAll ("table tr:nth-child(even)") ; 



Proprietes et methodes DOM 

Les elements DOM renvoyes par les fonctions precedentes sont de type 
HTMLElement. II s'agit d'une interface basique regroupant les proprietes refletant des 
caracteristiques intrinseques aux elements HTML presents dans le document, ou 
plutot des noeuds du DOM au travers desquels ils sont representes. Une partie des 
attributs HTML correspond a des proprietes DOM eponymes. 
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Tableau 20-1 Quelques membres de I'interface HTMLEIement 



Propriete ou methode 


Description 


Type 


i nnerHTML 


Contenu HTML d'un element. 


stri ng 


outerHTML 


Contenu HTML et I'element lui-meme. 


stri ng 


textContent ou 
i nnerText 


Contenu texte simple. 


stri ng 


style 


Ensemble des proprietes CSS de I'element. 


CSSStyl eDecl arati on 


style. * 


Proprietes CSS individuelles, accessibles par des 
riieniures ecriis en carTieiv-dse . 
style. width, styl e . fontSi ze, 
styl e . 1 i stStyl eType, etc. 


stri ng 


tabi ndex 


Index de tabulation. 


long 


id 


Valeur de I'attribut id. 


stri ng 


lang 


Valeur de I'attribut 1 ang. 


stri ng 


title 


Valeur de I'attribut ti tl e. 


stri ng 


tagName 


Type de I'element (nom de la balise). 


stri ng 


className 


Valeur de I'attribut de classe affecte a I'element. 


stri ng 


cl assLi st 
nouveau 


Enumeration des classes individuelles presentes 
dans I'attribut cl ass. 


DOMTokenList 


childNodes 


Liste des nodes enfants contenus dans I'element. 


NodeLi st 


firstChild 


Premier node enfant. 


HTMLEIement 


lastChild 


Dernier node enfant. 


HTMLEIement 


parentNode 


Node parent. 


HTMLEIement 


nextSi bl i ng 


Node frere suivant. 


HTMLEIement 


prevSi bl i ng 


Node frere precedent. 


HTMLEIement 


attri butes 


Attributs de I'element. 


NamedNodeMap 


getAttri bute(attr) 


Renvoie la valeur de I'attribut attr. 




setAttribute(attr,val) 


Modifie la valeur de I'attribut attr par val. 




removeAttri bute(attr) 


Supprime I'attribut attr si celui-ci existe. 




focus() 


Donne le focus a I'element. 




blurQ 


Retire le focus. 





Methodes de manipulation DOM 

createElementO 

Cree dynamiquement un nceud DOM. Le nom de I'element HTML est indique 
(sans chevrons). 
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nouveauDiv = document. createElement("di v") ; 

nouveauDi v. i nnerHTML = "<p>Je suis <b>nouveau</b> ! </p>" ; 

Cet element n'est cree que dans les « limbes » du document, et ne devient visible 
qu'apres insertion a l'aide d'une des fonctions suivantes. 

appendChild() 

Insere un noeud DOM enfant dans un parent. 

paragraphe = document . createEl ement("p") ; 
paragraphe . i nnerHTML = "Je suis <b>nouveau</b> !"; 
document. body . appendChi Id (paragraphe) ; 

removeChildO 

Retire un enfant a son parent. Tragedie ! 

paragraphe = document . querySel ector("body>p") ; 
document. body. removeChi Id (paragraphe) ; 

insert BeforeO 

Insere un noeud DOM avant un autre. 

nouveauLi = document. createElement("1i ") ; 
nouveauLi . i nnerHTML = "Je suis <b>nouveau</b> !"; 
var uneListe = document . getEl ementsByTagName("ul ") [0] ; 
uneLi ste . insertBefore(nouveauLi , uneLi ste . 1 astChi 1 d) ; 



createTextNodeO 

Cree un noeud texte. 

nouveauTexte = document . createTextNode("Beau comme un DOM"); 
document . querySel ector("body") . appendChi 1 d(nouveauTexte) ; 



Methodes pour formulaires 

En osmose avec les fonctions evoquees, coexistent des methodes propres aux API 
d'elements particuliers. Parmi eux, les champs d'entree de type <input>. 
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Tableau 20-2 Quelques methodes de I'API Input 



Propriete ou 


Description 


Retour 


val ue 


Pot/ii irno 1 ^ w^laiir ni i rha m n 

r\cLUUrric la ValcUl UU CrialTip. 

Peut etre modifie (avec = ) pour changer la valeur. 




checked 


Retourne true si coche, ou false si decoche. 


boolean 


files 


Liste des fichiers selectionnes. Renvoie null si ce n'est pas un champ d'entree 
de fichiers. 


FileList 


val ueAsDate 


Peut etre modifie (avec = ) pour changer la valeur. 


Date 


val ueAsNumber 


Peut etre modifie (avec = ) pour changer la valeur. 


Number 


list 


Retourne I'element datalist indique par I'attribut 1 i st. 


HTMLEIement 


selectedOption 


Retourne I 1 'option de liste selectionnee. 


HTMLEIement 


stepUp(n) 


Incremente la valeur de n. 




stepDown(n) 


Decremente la valeur de n. 





Gestionnaires d'evenements 

Les gestionnaires d'evenements sont des fonctions JavaScript associees a un evene- 
ment utilisateur ou navigateur. Une fois l'evenement declenche (par exemple un clic, 
une touche pressee, ou une page chargee), la fonction est executee. Un gestionnaire 
d'evenement est - en general - declare pour un noeud HTML : 

<button id="boutonl" value="Cliquez-moi ! "> 
<scri pt> 

var objetBoutonl = document. getElementByld('boutonl') ; 
objetBoutonl.oncl ick = function(event) { 

// Un clic a ete effectue sur le bouton 

// event contient les proprietes de l'evenement 

} 

</scri pt> 

Cette methode exploite la propriete DOM oncl i ck du noeud, qui correspond a l'eve- 
nement cl i ck. II en va de meme pour tous les autres evenements, qui sont egalement 
prefixes par on. En revanche, cela presente l'inconvenient de ne pouvoir assigner 
qu'une fonction a la fois. La specification DOM Level 2 prevoit deux methodes 
nominees addEventLi stenerO pour ajouter une fonction associee et 
removeEventLi stener() pour la retirer : 
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<button id="boutonl" val ue="Cl i quez-moi ! "> 
<scri pt> 

var objetBoutonl = document. getElementByld('boutonl') ; 
objetBoutonl. addEvent Listener ("cl ick" , f uncti on (event) { 

// Un clic a ete effectue sur le bouton 

// event contient les proprietes de l'evenement 
}, false); // false = phase de capture 
</scri pt> 

Jusqu'a sa version 9, Internet Explorer n'est equipe que de son propre modele d'eve- 
nements, avec les methodes attachEvent() et detachEvent() qui fonctionnent de 
maniere similaire : 

<button id="boutonl" val ue="Cl i quez-moi ! "> 
<scri pt> 

var objetBoutonl = document. getElementByld('boutonl') ; 
objetBoutonl. attachEvent("cl ick" , function (event) { 

// Un clic a ete effectue sur le bouton 

// event contient les proprietes de l'evenement 

}); 

</scri pt> 

II faut alors utiliser les deux en parallele et en profiter pour « sortir » la fonction en la 
nommant : 

<button id="boutonl" val ue="Cl i quez-moi ! "> 
<scri pt> 

var objetBoutonl = document. getElementByld('boutonl') ; 

function gestioncl ic(event) { 

// Un clic a ete effectue sur le bouton 

// event contient les proprietes de l'evenement 

} 

i f (objetBoutonl. addEvent Li stener) { 

ob jetBoutonl. addEvent Li stener("cl ick" .gestioncl ic, false) ; 
} else { 

objetBoutonl. attachEvent("cl ick" .gestioncl ic) ; 

} 

</scri pt> 

Les valeurs courantes possibles pour la souris sont cl i ck, dbl cl i ck, mouseup, mousedown, 
mouseover, mouseenter, mouseleave, mousemove. Pour le clavier: keypress, keydown, 
keyup, avec la propriete event . keyCode pour savoir quelle touche a ete utilisee. Pour le 
navigateur: load, error, unload, resize. Pour les formulaires : focus, blur, change, 
reset, sel ect, submi t. II en existe bien d'autres, par exemple pour la navigation tactile. 

599 



HTML 5 - Une reference pour le developpement web 



Reportez-vous aux differents exemples presents dans les chapitres faisant appel aux API HTML 5 pour 
retrouver les declarations d'evenements. 



Autres fonctions 

Quelques autres fonctions JavaScript ont su se rendre indispensables. En voici un 
bref apercu. 



Tableau 20-3 Quelques fonctions JavaScript utiles 



Fonction 


Role 


Detail des arguments 


setlnterval (fct,ms) 


Execute la fonction f ct tou- 
tes les ms millisecondes. 


f ct : nom de fonction JavaScript. 

ms : intervalle en millisecondes. 

Renvoie un objet utilisable avec cl earlnterval (). 


cl earlnterval (i ntv) 


Supprime un intervalle cree 
par setlnterval (). 


i ntv : reference renvoyee par setlnterval(). 


setTimeout(fct ,ms) 


Execute la fonction f ct 
apres ms millisecondes. 


f ct : nom de fonction JavaScript. 

ms : delai en millisecondes. 

Renvoie un objet utilisable avec cl earTimeout(). 


clearTimeout(to) 


Efface un timeout programme 
avec setTimeoutO. 


to : reference renvoyee par setTimeoutO. 


document . pri nt() 


Appelle la boTte de dialogue 
d'impression du document. 




alert(txt) 


Affiche un pop-up d'alerte. 


txt : chame de texte a afficher. 



Prise en charge 

La bonne nouvelle est que le support est quasi complet pour les navigateurs recents 
qui comprennent HTML 5, et que de ce fait les fonctions evoquees dans ce chapitre 
sont toutes disponibles. La mauvaise est que le support parfait des differents niveaux 
DOM est un vaste sujet qui ne peut etre resume ni tenu a jour aisement, tant le 
nombre de tests a mener est grand. Le site Quirksmode met a disposition des 
tableaux de compatibilite pour les navigateurs d'un certain age. 



RESSOURCE Informations de support DOM 

Quirksmode, le site de Peter-Paul Koch 

► http://www.quirksmode.org/dom/contents.html 

► http://www.quirksmode.org/dom/w3c_core.html 
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C'est deja fini ? Faisons un point sur l'avenir du HTML et la concurrence 
des autres technologies web. 



HTML est plus que jamais une technologie vivante autour de laquelle s'articulera le 
Web de demain. La quantite de fonctions proposees, autour du cceur de ce qui a fait les 
premieres pages du reseau, ne cesse de s'agrandir. Les inventeurs des nouvelles specifica- 
tions ont su transposer les principaux souhaits des developpeurs, et sont prets a aller 
encore plus loin. La frontiere entre systemes d'exploitation et Web sera de plus en plus 
tenue comme le prouvent les API disponibles des HTML 5. Les applications web, de 
plus en plus nombreuses, envahiront notre quotidien, accessibles a moindre cout, evolu- 
tives en permanence. II vous appartient de participer a cette revolution ! 



Quid des frameworks JavaScript et de Flash ? 

JavaScript a grandi avec le Web et gagne ses lettres de noblesse. Des frameworks 
solides (jQuery, Dojo, Mootools) ont vu le jour pour accelerer la realisation d'appli- 
cations completes et combler quelques lacunes. HTML 5 lui-meme fait la part belle 
aux API et reste ouvert a tous les complements facilitant la vie du developpeur. Outre 
l'apport de la retrocompatibilite, les librairies vont continuer a evoluer pour aller 
encore plus loin en profitant des briques offertes par HTML. Elles se specialiseront, 
puis Ton verra emerger un microcosme de noyaux modulaires et complementaires, 
qui auront chacun leur domaine de predilection, en orbite autour des API de stoc- 
kage, de communication, de graphisme et d'interoperabilite. 



HTML 5 - Une reference pour le developpement web 

Quant a Flash, Silverlight, Adobe AIR, Flex ou Java, qui ont encore beaucoup a pro- 
poser pour le Web, il faudra choisir l'ouverture ou la specialisation. Ces technologies 
ont tire vers le haut la democratisation d'Internet aupres des particuliers tant que des 
professionnels, et cohabiteront encore avec HTML. Les debats sont nombreux, 
mystiques, tandis que la situation actuelle ne permet pas de predire si les geants du 
logiciel (Adobe, Microsoft, Apple) tenteront encore d'imposer leur vision du Web ou 
de la mobilite. Comme c'est deja le cas avec le marche des applications pour mobiles 
developpees avec des SDK (Software Development Kit) specifiques, il faudra se mon- 
trer prudent. HTML 5 a tout pour exceller dans ce domaine, cependant il reste dans 
certains cas lie aux contraintes imposees par la plate-forme materielle et logicielle. 



Perspectives d'avenir 

Selon le redacteur Ian Hickson, il y aura probablement une specification 
« HTML 6 » et des suivantes, jusqu'a ce que le Web tel que nous le connaissons 
aujourd'hui trouve une autre voie d'evolution. Le travail sera debute avant meme 
l'achevement de HTML 5 dont la suite de tests (inexistante pour HTML 4) doit 
etre constitute depuis zero pour parvenir apres validation a la recommandation 
W3C. Le groupe de travail pourra ainsi partir sur ces nouvelles bases et probable- 
ment passer sur un modele evoluant d'une facon plus reactive et modulaire par rap- 
port aux besoins des internautes et aux progres rapides des navigateurs. 

Existera-t-il vraiment une telle numerotation des versions a long terme ? Le W3C 
souhaite poursuivre dans cette voie tandis que le WhatWG veut mettre en avant 
l'innovation reactive et le « standard vivant », tout en etoffant progressivement 
HTML. Le groupe de travail HTML fait reference aux futures evolutions avec le 
terme non officiel « HTML. next ». Que ces prochaines evolutions du langage soient 
baptisees « HTML 6 » ou non n'est finalement pas tres important. Lessentiel repo- 
sera sur les epaules des editeurs de navigateurs, et des passionnes qui tous les jours 
feront avancer I'etendue du langage. 

La vague « 6 » regroupera surement les specifications et les nouveautes qui n'ont pas 
fait partie de la vague « 5 ». Que pourra-t-on y retrouver ? Probablement une gestion 
des fenetres modales et boites de dialogue. Actuellement, celles-ci sont simulees par 
des scripts complexes et de nombreuses lignes de code HTML/CSS, qui ne sont pas 
toujours gerees de maniere efficace, ni accessibles. 

Les connexions peer-to-peer sont aussi dans la ligne de mire. On pourra certainement 
y decouvrir une integration plus poussee des applications web aux systemes d'exploi- 
tation avec les notifications, l'amelioration du Drag & Drop depuis de multiples 
sources. Des ameliorations pour la gestion des medias et peripheriques sont egale- 
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merit sur la feuille de route. Une interface nommee Media Capture API est dans les 
cartons, prevue pour assurer la capture de flux audio (micro) et video (webcam, 
photo) dans le navigateur. 

Quelques avancees en ce sens sont aussi destinees a l'etablissement d'interactions 
fortes entre deux services web, par exemple un webmail et une application web d'edi- 
tion d'images, afin que cette derniere puisse mettre ses competences a disposition du 
premier pour l'edition des pieces jointes recues par e-mail. Les possibilites sont infi- 
nies, et ce n'est qu'un debut ! 

A hen pas douter, HTML nous reserve encore de belles surprises pour ameliorer 
notre quotidien de surfeurs et concepteurs web. 



En UGNE Poursuivez votre lecture en ligne avec les annexes du livre sur CSS, 
I'accessibilite ARIA, les elements HTML 4 modifies et obsoletes... 

Rendez-vous sur le site d'accompagnement du livre pour trois annexes indispensables 

mises a disposition au format PDF : 
I'annexe A, qui fait un point, au moment de la mise sous presse de I'ouvrage, sur les 
« Fonctionnalites modifiees et obsoletes » entre HTML 4 et HTML 5 ; 
I'annexe B, qui donne un precieux rappel sur les « Feuilles de style CSS » ; 
I'annexe C, enfin, qu'il faudrait mettre entre les mains de tout developpeur web, et 
qui vous guide dans la creation de sites accessibles, conformes a la specification 
ARIA : « Accessibility et ARIA ». 

Retrouvez egalement I'auteur sur le site d'accompagnement du livre, les tableaux de 

prise en charge par les navigateurs y sont mis a jour regulierement. 

► http://html5.blup.fr/ 

► http://www.editions-eyrolles.com/ 



603 



Fonctionnalites 
modifiees et obsoletes 

Differences HTML 5 par rapport a HTML 4 

Une publication du W3C recense les nouveaux elements et attributs, ceux qui ont ete 
supprimes, et ceux qui ont ete modifies. D'autres differences y sont mises en evidence 
notamment pour l'API et la syntaxe en general. 

Ressource Specification W3C 

HTML 5 differences from HTML 4 
► http://www.w3.org/TR/html5-diff/ 



Fonctionnalites obsoletes 

Ces pratiques ne genereront pas d'erreur au validateur, mais des avertissements : 

• attribut http-equiv de l'element meta : l'attribut fang doit etre utilise en 
remplacement ; 

• attribut border sur l'element i mg : CSS doit etre utilise en remplacement ; 

• attribut language sur l'element script : il doit etre omis ou remplace par l'attri- 
but type avec la valeur text/javascri pt ; 

• attribut name sur l'element a : il doit etre omis ou remplace par l'attribut i d. Une 
exception cependant : s'il est present, il ne doit pas etre vide, mais posseder la 
meme valeur que Fid. 
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Fonctionnalites obsoletes non conformes 

Elements 

Ces elements sont entierement obsoletes et ne doivent plus etre utilises : 

• applet : remplace par embed ou object ; 

• acronym : remplace par abbr ; 

• bgsound : remplace par audio ; 

• di r : remplace par ul ; 

• frame, frameset, noframes : remplace par i frame et CSS, ou par les langages 
interpretes cote serveur pour generer des pages completes ; 

• i si ndex : utiliser un formulaire form combine a un champ texte i nput ; 

• 1 i sti ng, xmp : remplace par pre et code ; 

• noembed : remplace par object quand une alternative est necessaire ; 

• pi ai ntext : utiliser le type MIMEtext/pl ai n ; 

• stri ke : remplace par del ; 

• basefont, big, blink, center, font, marquee, multicol, nobr, spacer, tt, u: 
remplace par les proprietes CSS equivalentes. 

Precisions au sujet de tt : 

• utiliser kbd pour baliser une entree au clavier ; 

• utiliser var pour baliser une variable ; 

• utiliser code pour baliser un code source ; 

• utiliser samp pour baliser une sortie de donnees. 
Precisions au sujet de u : 

• utiliser em pour baliser une emphase ; 

• utiliser b pour baliser des mots-cles ; 

• utiliser mark pour baliser un texte surligne ou marquant une reference. 

Attributs 

Ces attributs sont obsoletes, bien qu'appartenant a des elements qui font encore 
partie du langage et ne doivent plus etre utilises : 

• charset sur a et 1 i nk : utiliser un en-tete HTTP Content-Type ; 

• coords et shape sur a : utiliser l'element area au lieu de a ; 

• methods sur a et 1 i nk : utiliser HTTP OPTIONS ; 

• name sur a, embed, img et option : utiliser l'attribut id ; 
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• rev sur a et 1 i nk : utiliser l'attribut rel ; 

• urn sura et 1 i nk : utiliser l'attribut href ; 

• nohref sur area : facultatif, ne plus utiliser ; 

• profile sur head : facultatif, ne plus utiliser ; 

• version sur html : facultatif, ne plus utiliser ; 

• usemap sur i nput : utiliser l'element i mg au lieu de i nput ; 

• 1 ongdesc sur i frame et i mg : utiliser un element a ou une image map ; 

• lowsrc sur img : utiliser une image compressee progressive (presente dans src) ; 

• target sur link : facultatif, ne plus utiliser ; 

• archive, classid, code, codebase, codetype sur object : utiliser data et type 
pour invoquer des extensions et l'element param pour les parametres ; 

• declare sur object : repeter l'element object completement ; 

• standby sur object : optimiser la ressource pour un chargement incremental ; 

• type et valuetype sur param: utiliser name et value sans declarer le type de 
valeur ; 

• event et for sur script : utiliser les evenements DOM ; 

• datapagesize sur table : facultatif, ne plus utiliser ; 

• abbr sur td et th : utiliser un texte explicite ou preciser avec title ; 

• axi s sur td et th : utiliser l'attribut scope ; 

• datasrc, datafld et dataformatas : utiliser XMLHttp Request. 

Pour les attributs suivants, utiliser les proprietes CSS en remplacement : 

• alink, link, margi nbottom, margi nhei ght, marginleft, marginright, margintop, 
marginwidth, text, vlink sur body ; 

• bgcolor sur body, table, td, th, tr ; 

• background sur body, table, thead, tbody, tfoot, tr, td, th ; 

• cl ear sur br ; 

• align sur caption, div, hr, hi a h6, iframe, input, img, legend, col, embed, 
input, img, legend, object, p, table, tbody, thead, tfoot, td, th, tr ; 

• char, charoff, valign, width sur col, tbody, thead, tfoot, td, th, tr ; 

• compact sur dl ; 

• hspace, vspace sur embed, input, img, legend, object ; 

• color, noshade, size, width sur hr ; 

• al 1 owtransparency, frameborder, margi nhei ght, marginwidth, scrolling, sur 
i frame ; 

• border sur img, object, table ; 
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• type sur ul, li ; 

• compact sur menu, ol, ul ; 

• width sur pre, table ; 

• height, nowrap sur td, th ; 

• cellspacing, cell padding, frame, rules sur table. 
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Figure 2-1 background:red ; color:white 



HTML 5 - Une reference pour le developpement web 

Dans des temps recules, lors de l'apparition du HTML et des premiers navigateurs, 
l'esthetisme des pages etait tres limite. L'essentiel de 1'information n'etait pas destine a 
un large public et on pouvait se contenter d'une mise en pages sommaire. Peu a peu, 
des balises ont ete ajoutees, et certains elements ont ete detournes de leur usage initial 
par les webdesigners/integrateurs pour obtenir un rendu plus complexe a l'ecran. 

Ainsi, les tables ont ete mises a profit pour disposer du contenu en colonnes puis en 
grilles, on a vu naitre des artifices tels que les images de separation (nominees 
spacer.gif) ou encore l'imbrication de multiples balises de presentation (par exemple 
<font>) aujourd'hui obsoletes. 

Ce qui palliait un manque intrinseque du HTML en capacites de controle graphique 
est devenu au fur et a mesure un cauchemar en termes de maintenance du code, de 
lisibilite et d'accessibilite du contenu. La semantique n'etait que peu considered, et la 
« soupe de tags » au menu de nombreux sites. 

C'est pourquoi les feuilles de style en cascade ( Cascading Style Sheets) ont ete adop- 
tees par le W3C pour regir l'apparence des elements HTML d'une page, concernant 
la disposition, les dimensions, les couleurs, afin de separer le contenu et la forme. 

Une feuille de style est applicable a une infinite de documents HTML, ce qui en 
facilite la maintenance et reduit les temps de chargement. 



Figure 2-2 

Une feuille CSS pour 
de multiples pages HTML 




Lobjet de ce chapitre n'est pas de dresser un inventaire exhaustif de toutes les techni- 
ques afferentes a CSS, mais de proposer une introduction et un petit aide-memoire 
vis-a-vis de HTML 5 auquel les feuilles de style sont intimement liees. 

Ressources 

£0 Goetter Raphael, CSS 3, Pratique du design web, Eyrolles 201 1 
CO Goetter Raphael, CSS avancees, Eyrolles 201 1 
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B-Feuilles de style CSS 
Les specifications sont nombreuses et pour certaines encore en mouvement. 



Ressource Specifications CSS 

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) 

► http://www.w3.org/TR/CSS21/ 
Tableau recapitulatif des specifications 

► http://www.w3.org/Style/CSS/current-work 
Cascading Style Sheets (CSS) 

► http://www.w3.org/TR/CSS/ 



Principe general 

L'application d'une feuille de style CSS s'effectue lorsque celle-ci est liee au docu- 
ment par la balise <1 i nk>, presente dans la section <head>. 

<"link rel="stylesheet" href="styles.css"> 

Plusieurs feuilles de style peuvent etre chargees de la sorte pour un seul document. II 
est aussi envisageable de declarer directement des instructions CSS entre les balises 
<style> et </style>, situees egalement dans <head> ou dans une portion du docu- 
ment, mais cette facon de faire ne facilite pas la maintenance ni la mise en cache. 

Dans le fichier de la feuille de style, on retrouve une ou plusieurs declarations CSS. Elles 
comprennent un selecteur dont le role est de cibler les elements concernes par chaque 
declaration, suivi d'un bloc entre accolades regroupant les proprietes a appliquer. 

P { 

text-align: center; 
font-weight: bold; 
color: orange; 
} 

header img { 

border: 3px solid gray; 
margin-bottom: 3em; 
} 

Dans cet exemple, trois proprietes sont appliquees aux elements <p> (les paragra- 
phes) et deux aux elements <img> situes dans <header>. 
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Selecteurs 

L'art d'ecrire de bons selecteurs est somme toute un grand jeu d'assemblage parmi les 
quelques briques de base existantes, pour s'adapter a la structure du document 
HTML qui doit etre style. Si HTML et CSS sont issus du meme auteur, alors il lui 
appartient de nommer les elements en consequence grace a des classes, des identi- 
fiants ou des attributs pour les lier aux declarations CSS, et ce en toute simplicite 
pour faciliter la lecture du code source ainsi que son analyse par le navigateur. 

Tableau 2-1 Quelques selecteurs 



Selecteur 


Exemples 


Elements concernes 


Selecteur d'element 


nav { } 

P { } 
ul { } 


<nav> 

<P> 
<ul> 


Selecteur de classe 


. remarque { } 
div. remarque { } 


Tout element portant I'attribut 

cl as s=" remarque" 

<div dass="remarque">. 


Selecteur d'id 


#intro { } 
header#i ntro { } 


Tout element portant I'attribut i d="i ntro" 
<header i d="i ntro">. 


Selecteur d'attribut 


[alt] { } 

i nput [type=submi t] { } 
[rel=nofol"low] { } 


Tout element possedant un attribut al t 

<input type="submi t">. 

Tout element portant I'attribut rel="nofol 1 ow". 


Selecteur d'enfant direct 


ul>li { } 


Tout element <1 i > enfant direct d'un <ul >. 


Selecteur d'element 
adjacent 


hl+p { } 


Tout element <p> immediatement precede par un ele- 
ment <hl>. 


Selecteur d'elements freres 


h2~p { } 


Un ou plusieurs elements <p> precedes par un ele- 
ment <h2>. 



Les selecteurs peuvent s'enchainer, separes par des espaces, pour combiner leurs effets. 



nav u"l>1i { ... } 

Ce selecteur s'adresse aux elements <1 i> enfants directs de <ul>, lui-meme situe dans 
un quelconque <nav>. 

#intro p. remarque { ... } 

Ce selecteur s'adresse aux elements <p> de classe remarque, situes dans l'element pos- 
sedant l'identifiant i ntro. 

Separes par des virgules, les selecteurs s'appliquent a une enumeration de plusieurs 
families d'elements. 

nav u"l>~li, #intro p. remarque { ... } 
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Cette declaration s'adresse aux elements <1 i> enfants directs de <ul>, lui-meme situe 
dans un quelconque <nav>... et independamment aux elements <p> de classe 
remarque, situes dans l'element possedant l'identifiant i ntro. 



Proprietes 

Les proprietes sont des paires de cles et valeurs. La cle est le nom de la propriete, suivie 
des deux-points, terminee par la valeur qui peut revetir differentes formes : mots-cles, 
valeur numerique simple, valeur numerique avec unite, chaine de texte, etc. 

Les combinaisons offertes par les proprietes CSS, leurs valeurs et les techniques associees 
sortent du cadre de ce modeste chapitre qui pourrait a lui seul depasser tous les autres en 
longueur. Pour en savoir plus, consultez les references proposees dans l'introduction. 

Tableau 2-2 Quelques unites courantes 



Unite 


Description 


Type d'unite 


px 


Pixels 


Relative 


% 


Pourcentage (en general par rapport a l'element parent) 


Relative 


em 


Cadratin (relatif a la taille de la police) 


Relative 


ex 


Hauteur de la lettre x 


Relative 


i n 


Pouces (= 2,54 cm) 


Absolue 


cm 


Centimetres (= 10 mm) 


Absolue 


mm 


Millimetre 


Absolue 


pt 


Points (= 1/72 in) 


Absolue 


PC 


Picas (=12 pt) 


Absolue 



Les unites les plus pertinentes pour un affichage a l'ecran restent px, %, et em. 

Tableau 2-3 Texte 



Propriete Role 


col or 


Couleur du texte 


font 


(Declaration groupee) 


font-wei ght 


Graisse 


font-size 


Taille de police 


font-fami ly 


Famille de police 


font-vari ant 


Variante 


font-stretch 


Etirement du texte 


text-decoration 


Decoration de texte 
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Tableau 2-3 Texte (suite) 



Propriete 


Role 


text-transform 


Transformation de texte 


text-align 


Alignement 


text-justify 


Justification 


text-i ndent 


Indentation 


1 i ne-hei ght 


Hauteur de ligne 


word-spaci ng 


Espacement de mot 


word-wrap 


Retour a la ligne 


Exemple 




P i 

font-weight: bold; 
color: #005A9C; 
text-align: left; 

"| i np-hpi nhf 1S0% - 

1 1 1 IC IIC 1 Ul 1 L i ± JU/U j 

} 


Tableau 2-4 Fonds 


Propriete 


Role 


background 


(Declaration groupee) 


background -col or 


Couleur de fond 


background -image 


Image de fond 


background -repeat 


Repetition de I'image de fond 


background -position 


Position de I'image de fond 


background -attachment 


Attache de I'image de fond par rapport a la page 


background-origi n 


Position du fond par rapport a la boTte de I'element 


background-si ze 


Taille de I'image de fond par rapport aux dimensions de I'element 



Exemple 

div { 

background-image: url (image.jpg) ; 
background-repeat: no-repeat; 
background-size: 100% 100%; 
background-ori gi n : content-box ; 

} 



Ressource Tutoriels CSS sur Alsacreations 

Arriere-plans avec CSS 3 Backgrounds 

► http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html 
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Propriete 



Tableau 2-5 Ombrages et transparence 
Role 



text-shadow 


Ombrage du texte 


text-outline 


Contour du texte 


box-shadow 


Ombrage d'un element boTte 


opacity 


Opacite 



Exemple 

footer { 

opacity: 0.5; 

text-shadow: Opx Opx 9px #777; 

box-shadow: rgba(0 , , , . 4) lOpx lOpx lOpx; 

} 



RESSOURCE Tutoriels CSS sur Alsacreations 

Les ombrages en CSS 3 

► http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html 



Tableau 2-6 Bordures 


Propriete 


Role 


border 


(Declaration groupee) 


border-color 


Couleur du bord 


border-spaci ng 


Espacement du bord 


border-collapse 


Fusion du bord 


border-styl e 


Style du bord 


border-wi dth 


Largeur de la bordure 


border-radius 


Rayon du bord arrondi 


border-image 


Style de bord avec image 


outline 


Contour 


outl i ne-styl e 


Style du contour 


outline-color 


Couleur du contour 


outline-width 


Largeur du contour 



Exemple 

.arrondi { 
border: 5px solid yellow; 
border-radius: 20px; 

} 
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: focus { 
outline: thick solid #fcO; 

} 



Tableau 2-7 Positionnement et dimensionnement 



r l upi iclc 


Rnlp 
nuic 


U 1 bp 1 ay 


IVIUUc U dlllLlldyc 


1 1 u ct L , L leal 


l\/lnHo flnt+ant 
IVIUUc IIULLdlll 


nnci "f"T /"in 
pub 1 L 1 Ul 1 


Pncitinnnomont 
rUDI LIUI II Icl 1 Icl 1 L 


-w n <-J n V/ 

^ 1 MUCA 


OrHro no rarninn'Qmant 
VJIUIc Uc IcLUU VI cl llcl 11 




« vertical » 


overfl ow 


Mode de depassement de bloc 


overfl ow-y 


Mode de depassement de bloc vertical 


overfl ow-x 


Mode de depassement de bloc horizontal 


wi dth 


Largeur 


hei ght 


Hauteur 


top 


Position par rapport au haut 


left 


Position par rapport a la gauche 


ri ght 


Position par rapport a la droite 


bottom 


Position par rapport au bas 


paddi ng 


Marge interne 


margi n 


Marge externe 


mi n-hei ght 


Hauteur minimale 


max-hei ght 


Hauteur maximale 


mi n-wi dth 


Largeur minimale 


max-wi dth 


Largeur maximale 


verti cal -al i gn 


Alignement vertical 


vi si bi 1 i ty 


Visibilite 


rotation 


Rotation 


rotation-poi nt 


Point de rotation 



Exemple 

img. illustration { 

float: right; 
margin-left: 2em; 
max-wi dth: 50%; 

rotation: lOdeg; 
rotation-point: bottom left; 
} 
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Tableau 2-8 Listes 



Propriete 


Role 


list-style 


Style de liste 


1 i st-style-type 


Type de puce pour les elements de la liste 


list-style-image 


Image de puce pour les elements de la liste 


list-style-position 


Position de la puce 


Exemple 




ul li { 

list-style; disc; 

> 


Tableau 2-9 Autres 


Propriete 


Role 


cursor 


Apparence du curseur 


di recti on 


Direction d'ecriture 


Exemple 




i nput [type=submi t] 
cursor: pointer; 

} 




Tableau 2-10 Animations 


Propriete Role 


animation 


(Declaration groupee) 


animation-delay 


Delai d'animation 


animation-di rection 


Sens d'animation 


ani mati on-du rati on 


Duree d'animation 


ani mati on -i te rati on -count 


Nombre d'iterations 


animation-name 


Norn d'animation 


ani mati on -ti mi ng-f unction 


Fonction d'acceleration 



Exemple 

div { 

animation-name: 'diagonale'; 
animation-duration: 3s; 
animation-iteration-count: 5; 
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©keyframes 'di agonal e' { 
from { 
left: 0; 
top: 0; 

} 

to { 

left: 150px; 
top: 200px; 

} 

} 



Tableau 2-11 Transformations 



Propriete 


Role 


transform 


(Declaration groupee) 


transform-ori gi n 


Point d'origine de la transformation 


transform-style 


Style de transformation 


perspective 


Effet de perspective 


perspecti ve-ori gin 


Point d'origine de la perspective 


backf ace-vi si bi 1 i ty 


Visibilite de I'arriere de I'element transforme 


Exemple 




hi { 

transform: rotate(8deg) ; 

} 




Tableau 2-12 Transitions 


Propriete 


Role 


transition 


(Declaration groupee) 


transition-delay 


Delai de transition 


transition -duration 


Duree de transition 


transition-property 


Propriete a laquelle appliquer la transition 


trans i tion-ti mi ng-f unction 


Fonction d'acceleration pour la transition 



Exemple 

img. transition. couleur { 

transition: transform .5s ease-in; 

} 

img. transition. coul eur : hover { 
transform: rotate(lOdeg) ; 

} 
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Ressource Tutoriels CSS sur Alsacreations 

Transitions CSS 3 

► http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html 

Une petite quantite de nouvelles proprietes CSS 3 ont ete implementees au fur et a 
mesure dans les moteurs de rendu, officiellement de maniere experimentale, avec des 
prefixes specifiques. C'est par exemple le cas de border-radius qui existait initiale- 
ment sous le nom de -moz-border-radi us pour les navigateurs Gecko (Mozilla), 
-webkit-border-radius pour les navigateurs WebKit (Chrome, Safari). Opera a 
quant a lui choisi de l'integrer directement, mais utilise le prefixe -o- pour ses pro- 
pres experimentations. Une fois tous les tests concluants, la propriete adopte son 
nom definitif, sans prefixe. 

Ressource Tutoriels CSS sur Alsacreations 

Les prefixes vendeurs en CSS 

► http://www.alsacreations.eom/article/lire/1 1 59-prefixes-vendeurs-css-proprietaires.html 



Pseudo-classes et pseudo-elements 



Les pseudo-classes et pseudo-elements affinent les capacites des selecteurs. lis s'ecri- 
vent a la suite du selecteur initial, concatenes par un signe deux-points « : ». 

Tableau 2-13 Quelques pseudo-classes et pseudo-elements 



Pseudo-* Role 


:~link 


Lien 


: vi sited 


Lien visite 


: hover 


Element survole 


: active 


Element actif 


: focus 


Element ayant le focus 


: f i rst-chi 1 d 


Premier enfant 


:last-child 


Dernier enfant 


: nth-child(n) 


n-ieme enfant 


: nth-last-of-child(n) 


n-ieme dernier enfant 


: nth-of-type(n) 


n-ieme type d'element 


: nth-last-of-type(n) 


n-ieme dernier type d'element 


: fi rst-of-type 


Premier type d'element 
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Pseudo-* 



Tableau 2-13 Quelques pseudo-classes et pseudo-elements (suite) 
Role 





last-of-type 


Dernier type d'element 




onl y-chi 1 d 


Enfant unique 




only-of-type 


Element de type unique 




checked 


Etat coche 




enabled 


Etat active 




i ndetermi nate 


Etat indetermine 




not(expr) 


Negation de I'expression 




:fi rst-letter 


Premiere lettre 




: fi rst-1 i ne 


Premiere ligne 



Exemple 

a: hover { 

text-decorati on : under! i ne ; 

} 

p : : f i rst-1 etter { 
font-size: 2em; 

} 



Regies @ 

Les « regies @ » sont des instructions plus evoluees pouvant se retrouver dans les 
feuilles de style pour moduler leur comportement ou ajouter des informations qui ne 
pourraient trouver leur place dans des declarations classiques. 



Tableau 2-14 Quelques regies @ 



Propriete 


Role 


©import 


Importer une autre feuille de style CSS. 


@charset 


Declaration de I'encodage des caracteres. 


©page 


Definir des regies generales pour les medias pagines. 


@font-face 


Importer un fichier de police (fonte) externe. 


©media 


Definir des requetes de media. 
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Exemple 

©import "autres_styl es . ess" ; 
©import url ("impression . ess") print; 

@page { 

size: 15cm 20cm; 
margin: 2cm; 
marks: cross; 

} 

©font-face { 

font-family: maPolice; 

sre: url (ToutSaufComi cSans . otf ) ; 

font-weight: bold; 

} 

P { 

font-family: maPolice; 

} 

©media print { 
body { 

font-size: 2em; 
background: white; 

} 

nav { 

display: none; 

} 

} 



Media queries 

Les media queries (ou requetes de media) sont une fonctionnalite bien utile de CSS 
pour adapter le design et la presentation generale d'une page web selon le periphe- 
rique de consultation. Depuis la navigation sur mobiles jusqu'aux plages braille, la 
presentation est ajustee selon les capacites de rendu, par exemple en modifiant la 
taille du texte ou son agencement. 

La syntaxe d'une media query est une suite de conditions a satisfaire. Au besoin, le 
navigateur evaluera l'expression et chargera les styles y correspondant ou les rechar- 
gera dynamiquement s'il y a lieu. 
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Exemple de media query 

©media screen and (mi n-wi dth : 200px) and (max-width: 640px) { 
section { 

display: block; 
clear: both; 
margin: 0; 

} 

} 

Ici, Ton s'adresse a un ecran (screen) dont la resolution en largeur est comprise 
entre 200 et 640 pixels. Si le navigateur se retrouve dans cette condition, les elements 
de type <section> passeront tous en mode bloc, sans aucune marge, pour une 
meilleure disposition verticale sur un petit ecran. 

Pour decouvrir la magie des media queries, consultez l'article en ligne redige par votre 
auteur devoue. 



Ressource Tutoriels CSS sur Alsacreations 

Les Media Queries CSS 3 

► http://www.alsacreations.com/article/lire/930-css3-media-queries.html 
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Un sage d'Ikea disait : « Un bon design doit toujours rester accessible ». 
La future recommandation WAI-RAIA permettra, au sein de HTML 5, 
le respect des principes fondamentaux de l'accessibilite numerique. 




Figure 3-1 Des vitamines pour tous ! 



HTML 5 - Une reference pour le developpement web 



L'accessibilite numerique fait l'objet de moult debats dans la communaute des web desi- 
gners, integrateurs, experts comme debutants. Sa vocation est de rendre accessibles la 
technologie et ses bienfaits, notamment Internet, a tous les humains. Cela suppose done 
une prise en compte de certains handicaps, voire de caracteristiques purement sociales et 
materielles, puisque nous ne sommes pas tous loges a la meme enseigne. 

Cette intention est louable et reconnue comme une obligation citoyenne par 
l'Europe. La plupart des gouvernements occidentaux ont vote des mesures destinees 
a favoriser la prise en compte de l'accessibilite numerique dans la realisation des pro- 
jets, produits et services dependant des TIC (Technologies de l'lnformation et de la 
Communication). L'ONU la definit comme un droit universel selon l'article 9 de la 
Convention relative aux droits des personnes handicapees, adoptee en 2006. 

Pourtant, les applications concretes ne sont pas toujours prises en compte, faute de 
connaissances, de moyens, ou de temps. Dans le domaine du Web, il appartient a 
tous de proceder au mieux et de ne pas negliger ce critere de qualite essentiel. 



Qu'est-ce que l'accessibilite du Web ? 

Contrairement a beaucoup d'idees recues, nous sommes tous concernes par l'accessi- 
bilite du Web. De facon continue, tout au long de notre vie (parce que nous sommes 
affectes par un handicap), durant une periode determinee (un bras dans le platre), ou 
a partir d'un certain age (parce que notre vue baisse). Les exemples sont nombreux et 
Ton considere que la proportion du public concerne directement par l'accessibilite 
atteint 15 a 20 % en Europe. 

Dans un sens plus general, il s'agit de permettre l'acces aux ressources en ligne, quels 
que soient le materiel et le reseau utilises (indirectement lies aux moyens financiers 
de tout un chacun), quels que soient les aptitudes physiques et mentales, la langue 
maternelle, l'age, ou la localisation geographique. 



Figure 3-2 

Symboles reconnus 
a I'international 
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Concretement, une personne non voyante pourra utiliser une synthese vocale qui lui 
lira successivement les elements figurant sur une page web, si le site est bien concu et 
ne comporte pas d'erreurs de conception empechant le logiciel de synthese de pou- 
voir comprendre son contenu texte. Une personne handicapee motrice pourra utiliser 
un peripherique de pointage different d'une souris, avec un clavier visuel a l'ecran et 
un petit joystick. II existe des outils de commandes fonctionnant avec les doigts, les 
paupieres, la langue, et meme le souffle ! 

De nombreux hommes et femmes sont dans ce cas et maitrisent Internet a un haut 
niveau. Vous pouvez tres bien avoir de nombreux echanges avec un non-voyant ou un 
internaute possedant un handicap moteur, sans que vous puissiez vous apercevoir que 
votre interlocuteur en ligne utilise une synthese vocale ou un peripherique d'entree 
qui n'est pas un couple souris-clavier. 

Les bienfaits d'une prise en compte serieuse et rationnelle de l'accessibilite d'un site 
web sont multiples : 

• le public pouvant consulter votre site est bien plus large ; 

• les personnes handicapees profitent des memes services ; 

• les moteurs de recherche, dont on dit qu'ils sont les premiers internautes aveugles, 
comprennent beaucoup mieux le contenu de vos pages et les indexent de facon 
optimale ; 

• Faeces est rendu possible sur des plates-formes techniques limitees ; 

• la proprete du code source et sa maintenabilite sont accrues. 

II existe de nombreuses ressources sur le Web pour prendre connaissance des bonnes 
pratiques et des astuces pour ameliorer l'accessibilite d'un site. De plus en plus 
d'extensions et d'outils voient le jour pour effectuer des diagnostics et des tests. 

Les lecteurs d'ecran quant a eux evoluent lentement mais surement. On peut citer 
parmi les plus connus VoiceOver (Mac OS X), JAWS, Window-Eyes, ZoomText, 
NVDA (Windows). Leurs anciennes versions ne sont pas toujours receptives a ARIA. 

Dans tous les cas, on veillera a minima au respect de certaines regies (voir encadre). 

HTML 5 est desormais concerne a juste titre, car revetant un aspect plus dynamique 
et beaucoup plus riche au travers des API gravitant autour du noyau HTML. Des 
lors, il est complexe de pouvoir lire un document de facon lineaire, du debut a la fin, 
alors que des parties dynamiques peuvent changer de contenu a tout moment. Bien 
qu'un soin certain soit apporte par les redacteurs des specifications, rien n' oblige les 
developpeurs web a tout mettre en oeuvre pour reussir un site totalement accessible. 
La diversite des situations et des problematiques pouvant survenir n'ont de limite que 
l'imagination de tous ceux qui participent a l'elaboration du Web. 
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Bonnes pratiques pour un site accessible 

Au prealable a toute mise en ceuvre technique au niveau du code HTML, des bonnes pratiques existent pour struc- 
turer et produire du contenu pour le Web. En voici quelques-unes, ainsi que les cas dans lesquels elles se revelent 
salutaires. 

• Ne pas baser I'information uniquement sur les couleurs (daltonisme et achromatopsie), par exemple eviter 
« cliquez sur le bouton rouge ». 

• Ne pas baser I'information uniquement sur le son (surdite). 

• Permettre I'agrandissement des polices dans le navigateur (myopie, fatigue visuelle). 

• Ne pas exiger un court delai de reaction (troubles moteurs), par exemple pour la navigation et les menus deroulants. 

• Favoriser le contraste du texte (deficiences visuelles). 

• Produire des alternatives telles que I'audiodescription ou la transcription pour des contenus video (surdite par- 
tielle ou totale). 

• Permettre la navigation au clavier (troubles moteurs) et prevoir des liens d'evitement. 

• Ne pas utiliser d'images pour afficher du texte, sans leur adjoindre une alternative texte (attribut al t). 

• Concevoir une navigation claire et simple (aptitudes mentales, vieillesse). 

• Structurer le contenu de facon logique avec une hierarchie de titres <hX> aisement comprehensible. 

• Exploiter HTML et CSS pour separer le fond de la forme, eviter les mises en pages en tableaux, suivre les recom- 
mandations du W3C. 

• Utiliser des liens d'evitement en debut de page pour offrir I'acces direct au contenu, a la navigation, a la recherche. 
Flash et Java ont fait egalement I'objet de debats, car etant embarques dans de nombreuses pages et faisant appel 
a une technologie radicalement differente des briques de base du Web, ils ont pu penaliser la navigation et I'acces 
(de facon partielle ou totale) a des sites essentiels a tout un chacun. II existe desormais des techniques, prevues par 
Adobe ou anticipees par les logiciels d'aide a la navigation, pour ameliorer I'accessibilite des animations Flash. 
Une demonstration a ete publiee en ligne pour prouver que Ton peut rendre un site accessible sans penaliser son 
rendu visuel, en respectant les bonnes pratiques WCAG. 




Figure 3-3 Demonstration avant (inaccessible) et apres (accessible) http://www.w3.org/WAI/demos/bad/ 
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HTML semantique 

La premiere bonne pratique en HTML reste celle de respecter la semantique, et done 
d'utiliser les elements avec ce pour quoi ils ont ete prevus. Au debut du XXI e siecle, beau- 
coup d 'integrateurs (ainsi qu'Alsacreations.com) se sont fait l'echo d'une conception web 
conforme aux normes. Ils ont milite pour l'oubli de l'element <tabl e> a des fins de mise 
en pages, qui etait exploite a tort de la sorte. Cet usage detourne avait ete initie par le 
manque de possibilites graphiques des anciens navigateurs, un besoin d'aller plus loin dans 
le positionnement, et par une certaine ignorance generalised des bienfaits des feuilles de 
style CSS. 

Pourtant, cette philosophic n'a pas toujours ete comprise. Certains ont cru qu'il suffisait de 
remplacer les <tabl e> par des <di v> pour creer un site propre. Or, l'element <tabl e> n'est 
pas le grand mediant loup, et est tout a fait justifie dans le cas de donnees tabulaires. En 
premier lieu, il faut done surtout eviter le syndrome de la « divite », e'est-a-dire de consi- 
derer <div> comme un element bon a tout faire, et ne l'exploiter qu'en dernier recours 
lorsqu'aucun autre element n'existe. Par exemple, il est tout a fait logique qu'un paragraphe 
de texte soit contenu entre les balises <p> et </p> qui sont devolues a cet usage. II est inu- 
tile de lui preferer <div> qui n'a aucune valeur semantique, et qui serait potentiellement 
associe a des proprietes CSS pour lui conferer l'apparence d'un paragraphe. 

Avec HTML 5, les nouvelles balises (par exemple <arti cl e> et <nav>) sont une avancee 
indeniable en ce sens puisqu'elles facilitent l'interpretation du document, la lisibilite du 
code par un humain ou une machine, le referencement et l'accessibilite de facon globale. 
D'autres nouveautes permettent en theorie d'eviter les surcouches JavaScript ou Flash pour 
les elements medias (avec <audi o>, <vi deo>) et pour les controles de formulaires (avec les 
nouveaux types et attributs pour <input>). Dans la pratique, de nombreux progres sont 
encore attendus, car la navigation au clavier dans ces medias n'est pas toujours parfaite. 

Leur interpretation par les agents utilisateurs et les logiciels d'assistance a neanmoins ete 
sujette a des bogues et soumise aux « correctifs JavaScript » sur les anciennes versions 
d'Intemet Explorer, ce qui les rend invisibles sans JavaScript jusqu'a la version 8 incluse. La 
navigation au clavier pour les elements medias est imparfaite voire inexistante dans les ver- 
sions des navigateurs qui n'ont qu'un vecu recent avec HTML 5. La transcription texte des 
fichiers audio et video necessite encore de grands progres, car le support de <track> reste 
limite pour ne pas dire parcellaire au moment de la redaction de cet ouvrage. 

En ce qui concerne Canvas, le bilan est plus sombre car cette grille de pixels pure- 
ment graphique est bien complexe a « accessibiliser ». D'ailleurs, le faut-il vraiment ? 
Un texte alternatif peut-il faire l'affaire ? Tout depend de son usage. Canvas sera pro- 
bablement complete par un DOM ou une surcouche d'accessibilite. Cependant, 
seront-ils vraiment utilises ? SVG ne presente pas cet inconvenient, a la condition 
que le createur prenne en compte l'accessibilite des le depart. 
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Malgre tout, les specifications HTML sont concues de facon a ce que tous les ele- 
ments et attributs possedent un role murement reflechi, garantissant que son contenu 
pourra etre interprete a bon escient par un agent utilisateur bien concu. Du point de 
vue du code, quelques reflexes ne sont jamais superflus. 

Pour les tableaux de donnees : 

• Utiliser l'attribut summary sur <tabl e> . 

• Utiliser les attributs scope et headers sur <td> et <th>. 
Pour les formulaires : 

• Utiliser <fi el dset> et <legend>. 

• Associer une etiquette <label> a tout champ d'entree <input>, <textarea>, etc. 
Pour le contenu : 

• Completer l'attribut al t pour les <img> (non decoratives). 

• Utiliser un titre pertinent pour la balise de document <ti tl e> . 

• Utiliser une hierarchie de titres <hl> a <h6> bien structuree. 

• Employer des listes <ul>, <o"l> pour toute enumeration. 

Ces exemples ne sont qu'un echantillon de ce qu'il est possible de faire pour ame- 
liorer considerablement l'accessibilite d'un site, au sens large du terme. Pour epauler 
HTML et precher la bonne parole, il est necessaire de faire un tour du cote de la 
WAI, qui n'est pas ce geste tres gracieux permettant de saluer en Thailande en rap- 
prochant les deux mains de son visage, mais qui merite tout autant d'attention. 

WAI, WCAG et ARIA 

La Web Accessibility Initiative est issue du W3C. Des 1997, s'est fait ressentir le 
besoin d'etablir des recommandations et de developper des outils pour ameliorer les 
technologies du Web. Plusieurs guides ont vu le jour depuis, notamment : 

• Les WCAG 1.0 (1999) et WCAG 2.0 (2008) - Web Content Accessibility 
Guidelines — qui sont un ensemble de bonnes pratiques pour le contenu web, des- 
tinees aux personnes possedant une vision deficiente, une perte de capacite audi- 
tive, un handicap physique ou une deficience cognitive. 

•Les ATAG 1.0 (2000) et ATAG2.0 (2011) -Authoring Tool Accessibility 
Guidelines - ont pour cible les developpeurs de logiciels pour l'edition et la crea- 
tion de ressources web, afin de les inciter a produire du contenu accessible respec- 
tant au mieux les regies WCAG. 

• Les UAAG 1.0 (2002) - User Agent Accessibility Guidelines — se concentrent sur les 
developpeurs de navigateurs et de logiciels equivalents permettant la navigation et 
la consultation web. 
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WAI-ARIA - Accessible Rich Internet Applications - definit des methodes pour 
ameliorer l'accessibilite des applications web en general, notamment lorsqu'il 
s'agit de faire appel a des comportements dynamiques avec JavaScript et Ajax. 



Figure 3-4 
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Web Accessibility Initiative (WAI) 
Highlights 

For Review: ATAG 2.0 and Implementing ATAG 2.0 
Working Drafts 

Authoring Tool Accessibility Guidelines (ATAG I 2.0 is re-levant to you if 

social networking websites, content management systems (CMS), HTML 
editors, or others . ATAG defines how these tools should help you make 
your blog posts, websites, and other web content accessible — and 
how the tools themselves should be accessible so that people with 
disabilities can use them. See: 

• Gall for Review: ATAG 2.0 Updated Working Drafts e-mail, 

• Authoring Tool Accessibility Guidelines (ATAG) Overview . 
Please send comments by 15 September 2011. (201 1 -July-Zl ) 

For Review: UAAG 2.0 and Implementing UAAG 2.0 
Working Drafts 

WAI has published updated Worki n g" D rafts of User Agent Accessibility 
Guidelines IUAAG) 2.0 and Implementina UAAG 2.0 . UAAG defines how 
browsers, media players, and other "user agents" should support 
accessibility for people with disabili des and work with assistive 
technologies. Updates in this draft include: organization of the 
principles, focus behaviour and indication, and requirements for media. 
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■ .. 



WAI develops... 

■ guidelines widely regarded as the 

international standard for Web 
accessibility 

■ support materials to help understand and 
implement Web accessibility 

■ resources, through international 
collaboration 

WAI welcomes... 

:; participation from around the world 

■ volunteers to review, implement, and 
promote guidelines 

■ dedicated participant) in working groups 



Announcements 

■ Open position: Web Accessibility 



E_Y.^nt_Si Meetings, Presentations 



26 



t Accessibility Guidelines (UAAG) Overview 
iments by 19 August 2011. <2011-July-19) 



I AtallyMTLin Montreal, Canada 
August 2011: "Accessibility Post Web 
2..0" presentation by Michael 

I ..i WJ AumiliHj lianinv I'jy in 
Baltimore.MD, USA, on 19 September 
2011: Presentations by Shawn 

I AtHighEdWeb in Austin, TX, USA, on 
24 October 2011: Keynote by Shawn 

l At W3C TPAC i n Santa Clara, CA, USA, 
between 31 October - 4 November 
2011: 



En tant que developpeur web ou integrateur, vous etes directement concerne par 
WCAG et ARIA. En premier lieu parce que WCAG permet de prendre connais- 
sance des bonnes (et done des mauvaises) pratiques pour la mise en ligne de contenu 
web conventional, et de respecter differents niveaux de qualite a atteindre (A, AA, 
AAA) selon les moyens techniques mis a contribution. En second lieu parce que 
WAI-ARIA porte specifiquement sur les technologies qui rendent aujourd'hui le 
Web attractif, entre autres HTML 5 et Ajax pour les applications web que Ton qua- 
lifie de « riches » par distinction avec les documents « statiques ». 



RESSOURCE Recommandations WAI 

WCAG 2.0 

► http://www.w3.org/TR/WCAG20/ 
Techniques pour WCAG 2.0 

► http://www.w3.org/TR/WCAG20-TECHS/ 
Mieux comprendre les criteres WCAG 2.0 

► http://www.w3.org/TR/UNDERSTANDING-WCAG20/ 
Point sur le support de HTML 5 et de son accessibility 

► http://www.html5accessibility.com/ 
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WAI-ARIA a atteint le stade de recommandation candidate le 18 janvier 2011, mais 
son implementation est anterieure. Bien que dependante de la bonne volonte des 
developpeurs d'agents utilisateurs (les navigateurs), elle progresse de facon certaine et 
l'initiative est soutenue par de grands noms tels qu'IBM, Mozilla, Dojo, jQuery, 
Microsoft, Google, Opera, Yahoo, Adobe, Apple, Sun. 

Les techniques offertes par WAI-ARIA visent a decrire l'etat et le comportement 
d'une application web. II s'agit par exemple de savoir si un menu est developpe, ou si 
un element HTML quelconque possede un role particulier (et dynamique) au sein du 
document. Beaucoup d'agrements dynamiques sont developpes en JavaScript avec de 
belles images et font face a deux problemes : aucune navigation au clavier nest habi- 
tuellement prevue pour les controler, et les technologies d'assistance ne savent com- 
ment les retranscrire (vocalement ou avec une plage braille). 

Les applications web sont bien souvent dopees a i'Ajax pour effectuer des appels au 
serveur HTTP en tache de fond et mettre a jour des contenus sans recharger la tota- 
lite de la page. Cette methode peut egalement passer inapercue pour les technologies 
d'assistance, a moins qu'elles ne soient notifiees d'un changement et que i'utilisateur 
puisse etre informe de la nature de la mise a jour du DOM et de son emplacement. 

Sous Windows, la plupart des navigateurs modernes transmettent ces informations 
ARIA, incluses dans le code HTML, a 1API MSAA (Microsoft Active Accessibility) 
existant depuis Windows 98. Cette derniere est alors mise a disposition des logiciels 
d'aide a la navigation pour decrire le contenu d'une facon alternative, par exemple 
avec une synthese vocale. Sous Linux on peut citer Gnome ATK/AT-SPI. 

La mise en ceuvre de WAI-ARIA consiste en l'ajout de quelques attributs au code 
HTML pour etendre sa valeur semantique. Le code n'en est pas alourdi. Leffort 
reste done minime et toujours benefique dans le cas du developpement d'applications 
web « riches ». En theorie, ces techniques ne se limitent pas a HTML et peuvent 
etre integrees a d'autres langages, e'est d'ailleurs le cas de SVG. 

On peut considerer que le debut de prise en compte a eu lieu avec Internet Explorer 8, 
Firefox 1.5 (plus serieusement avec la version 3), Opera 9.5, Safari 4 et Google 
Chrome 2. Le niveau de support est cependant different et croissant au fil du temps. 

Les anciens navigateurs qui ne supportent pas ARIA, ou les recents qui ne desirent 
pas l'utiliser, ignorent tout simplement les attributs HTML qui y font reference, et 
ne sont en aucun cas genes. Les frameworks JavaScript les plus celebres (entre autres 
jQuery et Dojo) sont deja ferus d'ARIA et font constamment des progres en ce sens. 

En attendant un support parfait de HTML 5 par l'ensemble des navigateurs, qui est 
certainement une douce utopie, WAI-ARIA apporte du concret et reste certaine- 
ment la meilleure initiative a considerer, applicable immediatement. 
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RESSOURCE Tout sur WAI-ARIA 

Reportez-vous a la specification WAI-ARIA elle-meme, ainsi qu'a une introduction critique et un guide 
concret : 

► http://www.w3.org/TR/wai-aria/ 

► http://www.w3.org/TR/wai-aria-primer/ 

► http://www.w3.org/TR/wai-aria-practices/ 



Les roles et proprietes de WAI-ARIA 

Le groupe du WAI preconise l'utilisation du terme complet « WAI-ARIA » pour ne 
pas confondre cette technologie avec un passage d'opera (et Ton parle bien ici du 
genre musical, pas du navigateur eponyme). Les exemples suivants en font honteuse- 
ment abstraction, par commodite de lecture. 

Quels sont les ajouts definis par ARIA ? 

• Des roles pour decrire un type de composant de l'interface graphique (par exem- 
ple un menu, un bouton, une barre de progression...). 

• Des roles pour decrire la structure generale du document (par exemple ses 
regions, sa titraille, etc.). 

• Des etats pour les composants interactifs du document (par exemple « coche » 
pour une case a cocher, ou « deploye » pour un menu). 

• Des proprietes pour decrire le drag &drop (glisser-deposer). 

• Des proprietes pour definir quelles sont les parties du document qui sont suscep- 
tibles d'etre mises a jour dynamiquement, sans rechargement complet (JavaScript 
et Ajax), avec des politiques de gestion et de notification de ces mises a jour. 

• Une maniere de naviguer a travers cet ensemble au clavier : se reporter pour cela a la 
description de rattribut tabindex. Doter un element quelconque d'un 
tabi ndex="0" permet d'y etablir le focus au clavier, tandis qu'un tabindex="-l" 
autorise le focus a la souris ou avec un script sans l'ajouter a l'ordre des tabulations. Ce 
concept est destine au developpement de composants d'interface (ou widgets) dotes de 
navigation au travers de leurs descendants. II est epaule par an'a-activedescendant 
qui indique pour un parent donne quel descendant recoit le focus. 

L'affectation des roles et des proprietes passe par deux families d'attributs en 
HTML 5 qui sont integrees nativement a la specification et done implicitement 
valides (contrairement a l'ajout d'attributs ARIA en XHTML 1.0). 



631 



HTML 5 - Une reference pour le developpement web 



La premiere famille est constitute d'un seul membre : rol e pour l'assignation d'un 
role precis a un element. Sa valeur est issue d'une liste de roles definis par la specifi- 
cation ARIA. 

La deuxieme famille est une serie d'attributs debutant par an' a- et suivis par un nom 
de propriete ou d'etat relatif a l'element. Leur valeur est aussi definie par la specifica- 
tion parmi un ensemble de valeurs. 



Ressource Roles et proprietes ARIA 

Tous les roles 

► http://www.w3.org/WAI/PF/aria/roles 
Toutes les proprietes et etats 

► http://www.w3.org/WAI/PF/aria/states_and_properties 
Attributs ARIA et valeurs du point de vue de HTML 5 

► http://dev.w3.org/html5/markup/aria/aria.html 



Roles avec I'attribut role 

Les roles ARIA peuvent etre classes en plusieurs families. II existe des roles abstraits 
desquels ces families peuvent heriter de proprietes communes, mais ils ne seront pas 
decrits, car ils ne sont pas directement exploitables. 



Points de repere (landmark roles) 



Les « points de repere » (ou Landmark Roles) delimitent les grandes zones du docu- 
ment ou de l'application web. 




Tableau 3-1 Roles ARIA « Points de repere » 


Role Description 


application 


Region correspondant a une application web (a I'inverse d'un document statique). 


banner 


Typiquement, I'en-tete comprenant un logo et eventuellement un outil de recherche. 


complementary 


Section complementaire a la section principale (main), de meme niveau, qui peut rester 
pertinente lorsqu'elle en est detachee. 


contenti nfo 


Region contenant des informations relatives au document. 


form 


Region contenant des objets qui dans leur ensemble constituent un formulaire. 


man n 


Contenu principal. 


navigation 


Ensemble de liens de navigation. 


search 


Une region contenant des objets qui dans leur ensemble constituent un outil de recherche. 
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Ces reperes dans le document autorisent l'utilisateur a naviguer de l'un a l'autre, sou- 
vent a l'aide de raccourcis clavier, et a en apprehender de fa9on plus naturelle la struc- 
ture generale. lis sont supportes par JAWS 10+, NVDA 2010+ et VoiceOver.. 

Application de roles ARIA 

<header role="banner"> 

<!-- En-tete et titre principal --> 
<form role="search"> 

<label for="q">Mot cle : </label> 
<input type="search" name="q" id="q"> 
<input type="submi t" val ue="Lancer la recherche"> 
</form> 
</header> 

<nav role="navigation"> 

<!-- Liens de navigation --> 
</nav> 

<section role="main"> 

<!-- Contenu principal --> 
</section> 

Plusieurs elements HTML 5 possedent deja un role WAI-ARIA natif (par exemple les 
elements de formulaire i nput, les elements semantiques comme <nav>). Certains d'entre 
eux peuvent etre « surcharges », par exemple <a> qui est affuble d'un role ARIA 1 i nk, et 
qui est amene a repondre a d'autres usages que celui d'un lien classique. D'autres elements 
en sont totalement depourvus, notamment les elements neutres <div>, <span>, mais 
peuvent en etre equipes. L'essentiel est de ne jamais aller a l'encontre des roles natifs, ce 
qui pourrait derouter ou inhiber les agents utilisateurs. Leur liste complete est presente 
dans la specification HTML 5, ainsi que les restrictions en vigueur. 

Ainsi les elements <article>, <aside>, <section>, <hr> possedent respectivement 
les roles par defaut article, note, region et separator. Si le concepteur choisit de 
leur affecter un autre role, il doit piocher parmi arti cl e, document, appl i cati on, ou 
main pour <article>; note, complementary ou search pour <aside>; et region, 
document, application, contentinfo, main, search, alert, dialog, alertdialog, 
status ou 1 og pour <secti on>. 

Pour les listes, <ul > et <ol > possedent le role implicite 1 i st, tandis que leurs enfants 
<1 i > sont categorises en 1 i sti tern. 



Ressource Roles et proprietes ARIA 

Valeurs appliquees implicitement aux elements en HTML 5 

► http://wvvw.w3.Org/TR/html5/content-models.html#annotations-for-assistive-technology-products-aria 
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Les elements de section HTML 5 peuvent sembler redondants avec les landmarks. 
N'est-ce d'ailleurs pas l'objet des nouvelles balises telles que <header>, <nav> et leurs 
acolytes de posseder une valeur semantique ? Lorsque toutes les technologies d'assis- 
tance supporteront avec perfection HTML 5 et par exemple efficacement le role de 
navigation vehicule par <nav>, on pourra presumer que l'attribut role="navigation" 
ne sera plus necessaire. Cependant, ce n'est pas encore le cas, c'est pourquoi il est plus 
sage de completer la structure du document avec ces points de repere, et de ne pas 
supposer qu'ils seront « devines ». 

Structure de document 

En quittant la vision satellite globale, et en traversant les premieres couches de 
nuages pour se rapprocher des zones composant chaque region majeure, les roles 
structurant le contenu font leur apparition. 

Tableau 3-2 Roles ARIA « Structure de document » 



Role Description 


article 


Un article formant une partie independante du document. 


col umnheader 


Un en-tete de colonne. 


definition 


Une definition. 


di rectory 


Une liste de references aux membres d'un groupe (une table des matieres). 


document 


Une region correspondant a un document (a I'inverse d'une application). 


group 


Un ensemble d'objets qui ne sont pas destines a etre inclus dans un resume 
du document ou dans sa table des matieres. 


heading 


Un en-tete de section. 


i mg 


Un conteneur pour un ensemble d'elements qui forment une image. 


list 


Une liste d'elements non interactifs. 


listitem 


Un element dans une liste ou une table des matieres {directory). 


math 


Une expression mathematique. 


note 


Une note annexe au contenu principal. 


presentati on 


Un element de presentation dont les roles implicites ne seront pas relayes a I'API 
d'accessibilite. 


regi on 


Une grande partie du document assez importante pour etre incluse dans le resume ou la 
table des matieres. 


row 


Une ligne de cellules dans une grille. 


rowheader 


Un en-tete de ligne de cellules dans une grille. 


separator 


Un separateur de contenu ou de groupes d'elements de menus. 


tool bar 


Une collection de controles frequemment utilises represented sous une forme compacte. 
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Grace a ces roles et a quelques proprietes (decrites ulterieurement), le balisage com- 
plementaire est tres aise. 

Titrage ARIA 

<section role="search" aria-label ledby="entete"> 
<hl id="entete" role="heading" aria-level="l"> 

Recherche dans les archives 
</hl> 

<!-- Formulaire ... --> 
</secti on> 

Dans cette situation interviennent egalement les roles implicites prevus par 
HTML 5. Pour ne citer que deux d'entre eux, columnheader et rowheader corres- 
pondent respectivement a des en-tetes de tableau, c'est-a-dire dans la pratique a un 
element <th>, auquel on aurait affecte l'attribut scope="col " ou scope="row". 

Composants graphiques (widgets) 

Les roles pour composants graphiques (ou widgets) decrivent des elements majoritaire- 
ment interactifs pour l'utilisateur. On y retrouve une panoplie complete de menus, bou- 
tons, champs de formulaire, et autres objets qui existent depuis que l'interface graphique 
utilisateur (en version originate GUT) a remplace l'austere ligne de commande. 



Tableau 3-3 Roles ARIA « Composants graphiques » 


Role 


Description 


alert 


Un message d'alerte. 


alertdialog 


Un dialogue contenant un message d'alerte. 


button 


Un controle d'entree (un bouton) destine a declencher des actions lorsqu'il est cli- 
que ou presse. 


checkbox 


Une case a cocher possedant trois etats : vrai, faux ou mixte. 


combobox 


Une liste de choix (conteneur). 


dialog 


Une fenetre de dialogue, usuellement modale, demandant un choix ou une informa- 
tion a l'utilisateur. 


grid 


Une grille (un tableau) pouvant contenir des cellules organisees en colonnes et en 
lignes (conteneur). 


gridcell 


Une cellule appartenant a une grille. 


link 


Une reference a une ressource externe qui provoque la navigation vers cette res- 
source lorsqu'elle est activee. 


listbox 


Une liste deroulante autorisant l'utilisateur a choisir un ou plusieurs elements parmi 
une liste de choix (conteneur). 


635 



HTML 5 - Une reference pour le developpement web 



Tableau 3-3 Roles ARIA « Composants graphiques » (suite) 
Description 



1 og 


Une region contenant des informations ajoutees au fur et a mesure dont les plus 
anciennes peuvent disparaTtre. 


marquee 


Une region dynamique contenant des informations non essentielles qui changent 
frequemment. 


menu 


Un controle offrant une liste de choix a I'utilisateur (conteneur). 


menubar 


Un menu qui est destine a rester visible et qui est usuellement presente a I'horizon- 
tale (conteneur). 


menui tern 


Une option parmi un groupe contenu dans menu ou menubar. 


menui temcheckbox 


Un element de menu pouvant etre coche et possedant trois etats : vrai, faux, mixte. 


menui temradi o 


Un element de menu parmi un groupe d'autres congeneres, dont un seul peut etre 
coche a la fois. 


opti on 


Un element selectionnable dans une liste. 


progressbar 


Une barre de progression pour les taches qui peuvent necessiter un certain temps. 


radi ogroup 


Un groupe de boutons radio (conteneur). 


radi o 


Un element de bouton radio parmi un groupe d'autres congeneres, dont un seul 
peut etre coche a la fois. 


scrol 1 bar 


Un controle graphique permettant de faire defiler le contenu dans la zone visible 


slider 


Un controle permettant a I'utilisateur de selectionner une valeur parmi un intervalle 
donne. 


spi nbutton 


Un controle permettant a I'utilisateur de selectionner une valeur a intervalles regu- 
liers, parmi un intervalle donne. 


status 


Un conteneur recueillant une information d'etat dont I'importance ne justifie pas 
I'emploi d'une alerte. 


tab 


Un onglet parmi un ensemble. 


tablist 


Une liste d'onglets (tab) qui sont des references respectives a des conteneurs 
(tabpanel). 


tabpanel 


Un conteneur pour les ressources associees a un onglet. 


textbox 


Un champ d'entree texte libre. 


timer 


Un conteneur dote d'un compteur numerique indiquant la quantite de temps ecoule 
depuis une date, ou restant jusqu'a une date fixee. 


tooltip 


Un pop-up contextuel affichant la description d'un autre element. 


tree 


Une liste contenant une arborescence de groupes pouvant etre reduits et redeployes 
(conteneur). 


treegrid 


Une grille dont les lignes peuvent etre reduites et redeployees (conteneur). 


treeitem 


Un element d'arborescence, pouvant en contenir d'autres. 
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Etant donne la diversite des situations, il est complexe de dresser une liste de prati- 
ques types pouvant repondre aux besoins courants de l'interface utilisateur. Se con- 
centrer sur quelques extraits permet d'apprehender la philosophic globale des roles 
que Ton retrouve en general sur les feuilles de l'arbre DOM. 

Exemple de menu avec trois actions 
<ul role="menu"> 

<li rol e="menuitem">Nouveau document</"li> 

<li role="menuitem">Ouvri r un document</li> 
<1 i role="menuitem">Fermer</l i> 

</ul> 

Ces actions peuvent ensuite etre implementees en JavaScript. 
Groupe de boutons radio 
<ul rol e="radiogroup"> 

<li rol e="radio">< ! -- Bouton radio 1 --></li> 

<li role="radio"><! -- Bouton radio 2 --></li> 
<li rol e="radio">< ! -- Bouton radio 3 --></li> 
</ul> 

Barre d'outils 

<div role="toolbar" tabindex="0" aria-activedescendant="btnl"> 
<img src="couper . png" role="button" id="btnl" al t="Couper"> 
<img src="copi er . png" role="button" id="btn2" al t="Copi er"> 
<img src="col 1 er . png" role="button" id="btn3" al t="Col 1 er"> 

</di v> 

ARIA autorise le « detournement » d'elements, puisque cette technologie permet 
justement d'affecter des roles precis a des elements qui hen ont pas. 

Span detourne en case a cocher 

<span tabindex="0" role="checkbox" aria-checked="true" 

onkeydown=" return gesti onEvenement(event) ; " 
oncl i ck="return gestionEvenement(event) ; "> 
De souhaite etre notifie des nouveaux commentai res 
</span> 

Dans cet exemple, la possibilite d'obtenir le focus au clavier est donnee par l'attribut 
tabindex. Son role est celui d'une case a cocher (role="checkbox"), dont l'etat par 
defaut est coche (aria-checked="true"). Le texte contenu par l'element lui sert 
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d'etiquette. Les attributs onkeydown et onclick associent des gestionnaires d'evene- 
ment en JavaScript qui doivent agir en consequence lorsque l'utilisateur clique ou 
utilise une touche de son clavier sur cet element, notamment la barre d'espace qui 
doit changer l'etat de la case. Une technologie d'assistance pourra done tout a fait 
interpreter l'ensemble de facon transparente, en tant que case a cocher convention- 
nelle. Bien entendu, ce type de solution est a reserver lorsqu'il n'a pas ete possible 
d'utiliser les elements HTML prevus a cet effet. 

Proprietes et etats avec les attributs aria-* 

Les proprietes et etats ARIA renseignent sur les caracteristiques intrinseques d'un 
element. II s'agit de fonctionnalites similaires qui sont tres proches d'un point de vue 
technique puisqu'elles sont toutes mises en oeuvre avec des attributs debutant par le 
prefixe ari a-. 

Application d'une propriete ARIA 

<div aria-1 ive="pol ite"> 

<!-- ... --> 
</di v> 

Leur difference reside principalement dans le fait que les valeurs des etats sont ame- 
nees a evoluer au cours du temps, tandis que celles des proprietes restent relativement 
stables au cours de la navigation dans le document. 

Par exemple, la propriete aria-requi red definissant le caractere requis d'un champ 
d'entree dans un formulaire devrait a priori rester constante au cours du temps. 

Application d'une propriete ARIA 

<input type="text" role="textbox" aria-required="true"> 

En revanche, l'etat aria-checked definissant le statut « coche » ou « decoche » 
pourra changer apres un evenement utilisateur, navigateur ou serveur (en Ajax). II en 
sera de meme pour aria-valuenow qui exprime la valeur d'un element de formulaire 
a un moment donne. 

Modification dynamique d'une propriete ARIA 

<!-- « Glisseur » ou potentiometre lineaire --> 
<div class="slidercontrol"> 

<img id="s1ider" src="curseur.png" role="sl ider" al t="Coeff i ci ent" 
ar i a-val uemi n="0" ari a- val uemax=" 100"> 
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</di v> 

<scri pt> 
// Fonction 

function sliderSet(valeur) { 

var curseur = document . getEl ementById( ' si i der ') ; 
// Definition des attributs aria-* 
curseur. setAttribute( 'aria-valuenow' , valeur); 

curseur. setAttribute( ' aria-val uetext ' , valeur+" %") ; 

} 

// Position par defaut 
sliderSet(50) ; 

// Autres actions eventuelles pour gerer le controle graphique a la 
souris et l'appel a la fonction sliderSet 
</scri pt> 

Dans cet exemple, une image sert de curseur et une fonction JavaScript permet de 
modifier dynamiquement la valeur transmise par ARIA aux technologies d'assistance 
en jouant sur les attributs aria-valuenow et aria-val uetext. En bonus, la propriete 
aria-orientation lui confererait une orientation (verticale ou horizontale). 

II aurait tout aussi bien ete possible de remplacer l'image par un des nouveaux types 
HTML 5 pour la balise <i nput>. L'usage dARIA avec cet element ne ferait alors pas 
double emploi. 

<input type="range" min="0" max="100" value="50"> 

Hormis la distinction existant entre les proprietes et les etats, leur implementation 
dans le code source HTML reste semblable. Certains d'entre eux fonctionnent de 
concert avec les roles et n'auront de signification que pour un role donne. Letat 
aria-pressed ne sera pertinent qu'avec un role button. 



Globaux 

ARIA definit en premier 


lieu des attributs globaux, applicables a tous les elements. 
Tableau 3-4 Attributs ARIA globaux 


Etat ou propriete 


Description 


ari a-atomi c 


Voir "live" 


ari a-busy 


Voir "live" 


ari a-control s 


Voir "relations" 


aria-describedby 


Voir "relations" 
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Tableau 3-4 Attributs ARIA globaux (suite) 



Etat ou propriete 


Description 


ari a-di sabl ed 


Voir "controles d'interface" 


aria-dropeffect 


Voir "drag & drop" 


ari a-f 1 owto 


Voir "relations" 


aria-grabbed 


Voir "drag & drop" 


aria-haspopup 


Voir "controles d'interface" 


ari a-hi dden 


Voir "controles d'interface" 


ari a-i nval i d 


Voir "controles d'interface" 


ari a-1 abel 


Voir "controles d'interface" 


aria-labelledby 


Voir "relations" 


aria-live 


Voir "live" 


ari a-owns 


Voir "relations" 


aria-relevant 


Voir "live" 



Tous ces attributs sont decrits dans chaque section specifique ci-apres. 



Controles d'interface 

Des attributs specifiques sont applicables aux composants graphiques interactifs (ou 
widgets), que Ton represente habituellement par des controles formant ensemble une 
application ou un formulaire avec lequel l'utilisateur peut interagir. 



Tableau 3-5 Attributs ARIA pour composants « graphiques » 



Etat ou propriete 




Valeurs 


Roles 


ari a- 

autocompl ete 


Indique que des suggestions d'autocompletion sont four- 
nies a l'utilisateur (en ligne dans le champ, en liste, les 
deux, ou aucune). 


i nl i ne , 
list, 

both, none 


combobox 
textbox 


aria-checked 


Statut coche ou decoche (etat). 


true, 
fal se , 
mi xed , 
undef i ned 


option 


aria-disabled 


Indique que I'element est perceptible mais desactive (etat). 


true, 
fal se 


Tous 
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Tableau 3-5 Attributs ARIA pour composants « graphiques » (suite) 
Etat ou propriete Description Valeurs Roles 



ari a-expanded 


Indique que I'element est deploye ou reduit (etat). 


true , 
fal se , 
undef i ned 


button 

document 

link 

secti on 

sectionhea 

d 

separator 
wi ndow 


aria-haspopup 


Indique que I'element possede un menu contextuel. 


true , 
fal se 


Tous 


ari a-hi dden 


Indique que I'element n'est pas perceptible pour I'utilisa- 
teur (etat). 


true, 
fal se 


Tous 


aria-invalid 


Indique que la valeur entree ne correspond pas a ce qui est 
attendu (etat). 


grammar , 
fal se , 
spel ling, 
true 


Tous 


ari a-1 abel 


Etiquette associee a I'element fournissant un nom recon- 
naissable pour I'utilisateur. 


Texte 


Tous 


ari a-1 evel 


Definit le niveau d'un element au sein de sa structure, par 
exemple dans les arborescences (tree) ou les imbrications. 


Nombre 
enti er 
superieur 
ou egal a 
1 


gri d 
headi ng 
1 i sti tern 
row 

tablist 


aria-multiline 


Specifie que le champ d'entree texte accepte (ou non) plu- 
sieurs lignes. 


true , 
fal se 


textbox 


ari a- 

mul ti sel ectabl e 


Specifie que I'utilisateur peut selectionner (ou non) plu- 
sieurs valeurs parmi un ensemble. 


true, 
fal se 


grid 
1 i stbox 
tree 


ari a-ori entati on 


Indique I'orientation d'un element, tel qu'une barre de defi- 
lement. 


verti cal , 
hori zontal 


scrol 1 bar 
separator 
slider 


ari a-pressed 


Statut « presse » d'un bouton (etat). 


true, 
fal se , 
mi xed , 
undef i ned 


button 


aria-readonly 


Indique que I'element est utilisable, mais qu'il n'est pas 
editable. 


true, 
fal se 


grid 
gri dcel 1 
textbox 
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Tableau 3-5 Attributs ARIA pour composants « graphiques » (suite) 



Etat ou propriete 


Description 


Valeurs 


Roles 


aria-requi red 


Indique que I'element est requis pour la validation du for- 
mulaire. 


true , 
false 


combobox 

gridcell 

listbox 

radiogroup 

spi nbutton 

textbox 

tree 


aria-selected 


Specifie que I'element est selectionne (etat). 


true, 
fal se , 
undef i ned 


gridcell 
option 
row 
tab 


ari a-sort 


Indique I'ordre de tri des elements dans une grille. 


ascending, 
descending, 
none, other 


col umnhead 
er 

rowheader 


ari a-val uemax 


Specifie la valeur maximale d'un controle d'intervalle. 


Nombre 


range 


ari a-val uemi n 


Specifie la valeur minimale d'un controle d'intervalle. 


Nombre 


range 


ari a-val uenow 


Specifie la valeur actuelle d'un controle d'intervalle. 


Nombre 


range 


ari a-val uetext 


Specifie la valeur texte alternative d'ari a-val uenow 
lisible par un humain. 


Texte 


range 



Ces attributs sont relativement parlants (si Ton ose dire) et s'attarder sur chacun 
d'entre eux meriterait d'y consacrer un ouvrage complet, tant la multiplicite des 
situations est grande. 

En se concentrant sur aria-checked, il est tres facile d'imaginer une liste dans 
laquelle l'utilisateur pourrait « cocher » des choix, sans case a cocher de type <input 
type="checkbox">. 

Exemple d'application de proprietes et roles ARIA 

<ul role="menubar" control s="contenu"> 
<1 i role="menui tem"aria-haspopup="true"> 

Af fi chage 

<ul role="menu"aria-hidden="true" hidden> 

<li role="menuitemcheckbox" aria-checked="true"> 

<img src="checked . png" role="presentation" alt=""> 

Trier par ordre alphabetique 
</li> 

<1 i role="menuitemcheckbox"aria-checked="fal se"> 
Trier par ordre chronologique 

</li> 
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</ul> 



</li> 
</ul> 



<table id="contenu" role="grid" summary="Li ste des articles"> 

<!-- Contenu du tableau-grille... --> 

</table> 




Rendu qraphique possible 

J 1 1 r L^J Trier par ordre alphabebq! 




Trier par ordre chronologique 



Nous avons affaire ici a : 

• Un menu racine de role menubar, dont on sait qu'il controle un element possedant 
l'identifiant contenu, c'est-a-dire la grille de donnees situee ulterieurement dans 
le code source. 

• Ce menu racine contient un element de menu nomme « Affichage » de role 
menuitem, et dont on sait qu'il possede un pop-up associe. 

• Un sous-menu de role menu, cache par defaut grace a l'etat ari a-hi dden et I'attri- 
but HTML 5 hidden. 

• Deux elements de liste dont le role est menuitemcheckbox, c'est-a-dire comme 
faisant partie d'un menu, pouvant etre coches individuellement, et dont l'un 
d'entre eux est note comme l'etant effectivement avec aria-checked="true" . 

• Une image symbolisant l'etat de facon graphique, dont le role est presentation, 
c'est-a-dire comme devant etre ignore par toute assistance a la navigation ou syn- 
thase vocale. 

• Un texte decrivant Faction declenchee par l'ensemble de cet element de controle. 

Des instructions supplementaires sont necessaires pour gerer le changement d'etat de 
l'image, que ce soit avec CSS ou avec JavaScript, et pour implementer l'effet attendu. 



Ainsi que le disait Luke Skywalker, la vie peut se cacher la ou on ne l'attend pas. II en 
va de meme pour les pages web dont le contenu peut etre vivant et changer a l'insu de 
l'utilisateur naviguant sans rendu visuel. En effet, un outil de synthese vocale proce- 
dera a la lecture lineaire du document sans savoir si une partie a ete modifiee, avant 
ou apres l'endroit ou se trouve son « curseur » de lecture et s'il doit le notifier. 

ARIA prevoit de marquer les portions de document, dont le contenu peut etre 
amene a changer au cours du temps de facon dynamique, par les attributs suivants. 



II y a de la vie sur cette planete 
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Tableau 3-6 Attributs ARIA pour regions « live » 
Etat ou propriete Description Valeurs 



ari a-atomi c 


Indique la portee de I'information retournee a I'utilisateur lorsque 
le contenu d'un element est modifie. 


true, false 


aria-busy 


Indique qu'un element et ses descendants sont en cours de mise a 
jour (etat). 


true, false 


aria-live 


Indique qu'un element pourra etre mis a jour et decrit le type de 
mises a jour que les agents utilisateurs peuvent attendre. 


off, polite, 
asservitive 


ari a- relevant 


Indique quelles modifications pourront etre operees. 


Une combinaison parmi les 
termes cles :addi ti ons, 
removal s, text, al 1 



Les valeurs pour ari a-1 i ve sont : 

• off : mise a jour non presentee a I'utilisateur, a moins qu'il n'ait deja le focus sur 
cette region. 

• pol i te : changement en tache de fond, l'assistant a la navigation peut l'annoncer 
au moment qu'il juge opportun (par exemple, a la fin de la lecture d'une phrase ou 
lorsque I'utilisateur a fait une pause dans son action). 

• asservitive : haute priorite, I'utilisateur doit en etre immediatement informe. A 
utiliser avec parcimonie pour ne pas perturber la navigation. 

Declaration d'un contenu « live » 

<div id="news" aria-"Hve="polite"> 

<!-- Ici les resultats du tournoi Blobby Volley en direct --> 
</di v> 

Cet exemple comprend un element <div> neutre, dont on sait que son contenu 
pourra etre mis a jour par JavaScript, probablement avec le concours d'Ajax. 
L'attribut aria-live indique que l'outil d'assistance doit « surveiller » cet element 
pour annoncer ce changement. 

Les valeurs pour ari a- relevant conditionnent le niveau de precision des informa- 
tions transmises par l'agent d'assistance a I'utilisateur selon le type d'evenement : 

• additions : lorsque des noeuds DOM sont ajoutes a la region. 

• removal s : lorsque du texte ou des noeuds sont retires de la region. 

• text : lorsque du texte est ajoute a n'importe quel noeud de la region. 

• all : correspond a I'ensemble des precedentes valeurs. 

Si le critere removal s est utilise, I'utilisateur devra etre informe des suppressions de 
contenu (texte ou noeuds DOM). Dans le cas d'une synthese vocale et d'un rempla- 
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cement de texte « kiwi » par « goyave », le mot « kiwi » sera prononce, mais il ne sera 
pas precise que « goyave » a ete retire. Cette information complete n'est pas toujours 
utile ou pertinente, il faut done en user avec parcimonie. 

Attention, toutes les regions dynamiques ne se pretent pas toujours a un emploi 
d'aria-live lorsqu'elles ont une specialite identifiee, car certains roles sont deja 
prevus a cet effet : alert, status, timer, marquee et log. 

Drag & drop (glisser-deposer) 

Deux attributs existent pour le glisser-deposer. 

Tableau 3-7 Attributs ARIA pour le glisser-deposer « drag & drop » 
Etat ou propriete Description Valeurs 



ari a-dropef feet 


Indique quelles fonctions sont declenchees 
lorsqu'un objet est depose sur la cible. 


Un ensemble d'un ou plusieurs termes 

cles :copy, move, 1 i nk, execute, popup, 

none. 


aria-grabbed 


Indique I'etat de I'element saisi, dans une ope- 
ration de glisser-deposer (etat). 


true : en train d'etre deplace 

f al se : I'element peut etre saisi 

undef i ned : ne peut pas etre saisi pour un 

glisser-deposer 



Pour en savoir plus, consultez en ligne l'article redige par Gez Lemon et traduit par 
Cedric Trevisan. 



RESSOURCE Zoom sur le drag & drop avec ARIA 

Glisser-deposer accessible avec WAI-ARIA 

► http://www.paciellogroup.com/blog/misc/ddfrench/WAI-ARIA_DragAndDrop_French.html 

Relations 

Les relations peuvent egalement etre decrites avec des attributs ARIA correspondants. 



Tableau 3-8 Attributs ARIA de relations 



Etat ou propriete 


Description 


Valeurs 


Roles 


aria- 

acti vedescendant 


Identifie le descendant actif d'un composant. 


Identifiant 


composi te 

group 

textbox 


ari a-control s 


Identifie les autres elements dont la presence ou le con- 
tenu sont controles par cet element. 


Liste d'identifiants 




ari a- 

describedby 


Identifie le ou les elements qui decrivent I'objet (comple- 
mentaire a ari a-1 abel 1 edby). 


Liste d'identifiants 
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Tableau 3-8 Attributs ARIA de relations (suite) 



Etat ou propriete 


Description 


Vaieurs 


Roles 


aria-fl owto 


Identifie le ou les elements suivants pour I'ordre de lecture, 
autorisant la technologie d'assistance a prendre le pas sur 
la hierarchie naturelle du DOM. 


Liste d'identifiants 




an' a- 


Identifie le ou les elements qui conferent une etiquette a 


Liste d'identifiants 




1 abel 1 edby 


I'objet (similaire a ari a- 1 abel). 






ari a-owns 


Etablit des relations de parente lorsque le DOM ne permet 
pas de le faire. Note : un element ne peut avoir qu'un seul 
« possesseur ». 


Liste d'identifiants 




aria-posi nset 


Definit la position d'un element dans un ensemble d'autres 
elements de type 1 i sti tern ou treei tern. 


Nombre entier 


listitem 
option 


aria-setsize 


Definit le nombre total d'elements dans I'ensemble courant 
de type 1 i sti tern ou treei tern. 


Nombre entier 


1 i sti tern 
opti on 



La plupart des relations etablissent un lien entre un element et un autre dans le docu- 
ment, par exemple ari a-labell edby et aria-describedby a des fins d'etiquetage et 
de description. 

Exemple de relations ARIA 



<div role="applicaton" aria-labelledby="todol ist" aria-describedby="info"> 
<hl id="todolist">Liste de choses a faire<hl> 
<p id="info"> 
Ce tableau recapitule toutes les taches en attente. 

</p> 

<div role="grid"> 

<!— ... — > 
</di v> 
</di v> 

Le conteneur principal est une application, dont le titre peut etre retrouve dans l'ele- 
ment d'identifiant todolist, et dont la description est presente dans l'element 
d'identifiant i nfo. 

En appliquant ce principe a <figure> en HTML 5 nous avons la une maniere de lier 
deux morceaux de contenu d'une maniere bien plus forte que leur simple proximite. 

Relation ARIA avec figure 

<figure> 

<img src="fi rebug.png" alt="Capture d'ecran de Firebug" 
aria-describedby="legendel"> 
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<figcaption "id="legendel"> 
<strong>Capture d ' ecran</strong> : L' extension Firebug pour Firefox propose 
des outils de developpement web regroupes sous forme d'onglets. 

</figcaption> 
</figure> 

Tous ces attributs forment un ensemble coherent et fourni pour la description 
avancee des etats et proprietes d'une application ou d'un document web. De nom- 
breux exemples sont disponibles en ligne pour explorer toutes les facettes d'ARIA. 



RESSOURCE Exemples en ligne 

Codetalks (notamment la section « Validation and Testing ») 

► http://codetalks.org/ 
OpenAjax Alliance 

► http://www.oaa-accessibility.org/examples/ 

Illinois Center for Information Technology and Web Accessibility 

► http://test.cita.illinois.edu/aria/ 



Valider et tester 



Le validateur en ligne validator.nu comporte une option compatible avec la syntaxe 
HTML 5 + ARIA ou XHTML 5 + ARIA. 

La meilleure facon de s'assurer de Faeces sibilite d'un site est de le tester avec les outils 
appropries, et au minimum avec la navigation au clavier qui est disponible native- 
ment dans tous les navigateurs. II existe des versions devaluation des deux plus cele- 
bres lecteurs d'ecran : JAWS et de Window-Eyes. NVDA est quant a lui diffuse en 
Open Source et telechargeable librement. Des extensions specifiques existent egale- 
ment, notamment pour Mozilla Firefox avec la Juicy Studio Accessibility Toolbar et 
FAccessibility Evaluation Toolbar. 



Figure 3-6 

Extensions pour Firefox 



U HTML5: AFIA | + | 

( ^j^ | | Q ] | -ft | | D httpy/dev.w3.oig^tml5/markup/aria/aria.html ^ 

^ Live Regions ARIA T H Table Inspeclar B Ontil d'analyse des ccntrastes de couleurs' 

\ft Reports- 77 Navigation- ^ Text Equivalents- Scripting- ^ Style- *t Validators- ffi Tools- ^ Keyboard- ^ Options- 



L extension Juicy Studio Accessibility Toolbar produit des resumes, notamment pour 
les roles ARIA attribues. 
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Juicy Studio: WAI -ARIA Properties 
Properties 



Properties 


Element 


Parent Nodes 


Markup 


• role-'navigation" 


DIV 


• HTML 
■ BODY 


<div role="navigation' r > 


• role="banner" 


H1 


• HTML 

• BODY 
■ DIV 

• DIV#header 

• DIV#header-iriside 


<hl role="banner"> 


• role-'search" 


FORM 


• HTML 

• BODY 

• DIV 

• DIV#sous-menu 


<forin method^post" 
action= "/ search/ " 






role= T " search" 


• role-'main" 


DIV 


• HTML 

• BODY 

. DIV#global 

• DIV#page 


<div role="main" 
id=" content "> 


• ro le= "complementary" 


DIV 


• HTML 
■ BODY 

• DIV#global 

• DIV#page 


<div role="con55leiuentary' r 
id="3idebar"> 


• TOle="contentinfo" 


DIV 


• HTML 
. BODY 

• DIV#global 
■ DIV#page 


<div role="contentinfo' r > 



Sous Mac OS X, VoiceOver est integre nativement depuis la version 10.4 et se 
retrouve meme sur les plates-formes mobiles sous iOS. Sous Linux, Orca est un 
autre projet libre destine a la synthese vocale, aux plages braille et a l'agrandissement. 



Figure 3-8 

Requin vs Orque 
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Telecharger Lecteurs d'ecran 

JAWS 

► http://www.freedomscientific.com/jaws-hq.asp 
Window-Eyes 

► http://www.gwmicro.com/Window-Eyes/ 
NVDA 

► http://www.nvda-fr.org/ 
Juicy Studio Accessibility Toolbar 

► https://addons.mozilla.org/fr/firefox/addon/juicy-studio-accessibility-too/ 
Accessibility Evaluation Toolbar 1 .5.62.0 

► https://addons.mozilla.org/fr/firefox/addon/accessibility-evaluation-toolb/ 
Orca 

► http://live.gnome.org/Orca 



L'aide de JavaScript 

Le nombre de complements JavaScript facilitant l'application de WAI-ARIA est 
croissant. Parmi eux, l'un des plus simples pouvant servir de base a une personnalisa- 
tion plus avancee est accessi fyhtml 5 . js : son action se borne a definir quelques 
roles et proprietes par defaut pour des elements HTML tels que <header>, 
<footer>, <nav>, <output>, <aside>, etc. Attention, ce type de script n'est pas mira- 
culeux, il ne pourra deviner automatiquement tous les roles applicables. 



Telecharger Scripts AccessifyhtmlS.js (pour jQuery) 

► https://github.com/yatil/accessifyhtml5.js/blob/master/accessifyhtml5.js 
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